jqplot：绘制系列

我想使用jqplot绘制一些数据，我有一个小问题。jqplot：绘制系列

我使用的代码是这样（code on fiddle）：

$.jqplot('chart1', [[202],[249],[148]], { 
    seriesColors : ['#ff0000', '#0f0', '#00f'], 
    seriesDefaults : { 
     renderer :$.jqplot.BarRenderer, 
     pointLabels : { 
      show : true 
     }, 
     tickRenderer : $.jqplot.CanvasAxisTickRenderer, 
     rendererOptions : { 
      barDirection : 'horizontal' 
     } 
    }, 
    axes: { 
     yaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer, 
      ticks: ["some value", "other series", "third series"], 
     }, 
    }, 
});

该图具有3个水平区域，“一些值”，“等系列”和“第三系列” 我需要每个图巴至在相应的区域下，并保持现在的颜色（红色为“某些值”，绿色为“其他系列”，蓝色为“第三系列”）。

我该如何格式化数据才能得到它？

由于额外的问题：

我想几个像素，Y轴和相应的斧头标签之间的余量。我如何设置？
该图具有bg颜色（淡黄色）。我该如何消除这种颜色并获得容器的颜色？

来源

2013-04-10 Zelter Ady

您需要将您的数据更改为

data = [[[202,1],[248,2],[148,3]]];

见工作示例here。

PS1：您可以通过设置barWidth = xx来改变条的宽度;其中xx以像素为单位（在给定示例中为50px）。

PS2：对于你的第一个问题外，你可以添加这样的事情：

$("#chart1 .jqplot-grid-canvas").offset({left:$("#chart1 .jqplot-grid-canvas").offset().left+5}); 
$("#chart1 .jqplot-series-shadowCanvas").offset({left:$("#chart1 .jqplot-series-shadowCanvas").offset().left+5}); 
$("#chart1 .jqplot-series-canvas").offset({left:$("#chart1 .jqplot-series-canvas").offset().left+5}); 
$("#chart1 .jqplot-point-label").offset({left:$("#chart1 .jqplot-point-label").offset().left+5}); 
$("#chart1 .jqplot-highlight-canvas").offset({left:$("#chart1 .jqplot-highlight-canvas").offset().left+5}); 
$("#chart1 .jqplot-highlighter-tooltip").offset({left:$("#chart1 .jqplot-highlighter-tooltip").offset().left+5}); 
$("#chart1 .jqplot-barRenderer-highlight-canvas").offset({left:$("#chart1 .jqplot-barRenderer-highlight-canvas").offset().left+5}); 
$("#chart1 .jqplot-event-canvas").offset({left:$("#chart1 .jqplot-event-canvas").offset().left+5});

我敢肯定，你可以把它一个更清洁的方式，但它的工作原理（改+5值什么你需要为了移动图表块）。请参阅更新的工作示例here

来源

2013-04-10 13:33:59 AnthonyLeGovic

不错。但是，如果仔细观察，您可以看到每个酒吧并不居中居中。你知道如何居中吗？（如绿条，与标签文字对齐）。 – 2013-04-10 13:37:20

将数据从data = [[[202,1]]，[[249,2]]，[[148,3]]];到data = [[[202,1]，[248,2]，[148,3]]]; （抱歉括号错误）。 – AnthonyLeGovic 2013-04-10 14:06:38

已更新示例[此处]（http://jsfiddle.net/AnthonyLeGovic/vTwU2/14/）回答（不是干净的方式来做）你的第一个额外问题 – AnthonyLeGovic 2013-04-10 14:20:47

jqplot：绘制系列

回答

相关问题