使用jqplot时,我必须创建2个系列的条形图,每个系列由3个不同的值(类别)组成。问题是第一个值约为50000,另外两个约为(-3) - (3)。因此,在一张图表上绘制时,只能看到2个条形图。 我正在考虑将LogRenderer用于y轴,但它似乎根本不起作用。最好的选择是为每个tickgroup(类别)设置不同的y轴,但是在搜索之后我没有找到任何方法来执行此操作。 (重要的是必须只有2个系列 - 这是日期比较所以不可能改变系列中的内容)
有谁知道如何实现这一目标?或者您是否有其他方式可以在一个图表上显示所有数据(主要使用条形图)。
JS摆弄我的工作示例: http://jsfiddle.net/F5N4r/
标题:
<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jqplot.enhancedLegendRenderer.min.js"></script>
<script type="text/javascript" src="https://bitbucket.org/armata007/jqplot/downloads/jqplot.logAxisRenderer.min.js"></script>
<div id="plot"></div>
代码:
var s1 = [50000, 0.11, 2.3];
var s2 = [55000, -0.20, 1.4];
var ticks = ['category 1', 'category 2', 'category 3'];
var plot1 = $.jqplot('plot', [s1, s2], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true
}
},
series: [
{
label: 'January 2012'},
{
label: 'February 2012'}
],
legend: {
show: true,
placement: "outside",
location: "s",
renderer: $.jqplot.EnhancedLegendRenderer,
rendererOptions: {
numberRows: 1
},
marginTop: "34px"
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
//renderer: $.jqplot.LogAxisRenderer,
pad: 1.05,
tickOptions: {
formatString: '%d'
}
}
}
});
结果: http://www.roslaw.pl/pics/2012-11-29_18-56-55_835341x930andWndpnd.png
由于
答案 0 :(得分:0)
我自己一直在玩这个,希望这能节省一些时间。
您需要为传递给函数的每个系列定义一个单独的系列 (在你的情况下是s1和s2)。您定义它们的顺序与它们传递的顺序相对应。
series: [
{
label: 'January 2012',
},
{
yaxis:'y2axis',
label: 'February 2012'
}
],
...
axes: {
xaxis: {
},
yaxis: {
label: "y axis 1"
},
y2axis: {
label: 'y axis 2',
}
}