jqplot 和 barcharts 中条形图和 Y 轴的不同缩放比例答案

【问题标题】：Different scaling of bars and Y-axis in jqplot & barchartsjqplot 和 barcharts 中条形图和 Y 轴的不同缩放比例
【发布时间】：2012-11-29 18:00:00
【问题描述】：

在使用 jqplot 时，我必须创建具有 2 个系列的条形图，每个系列都包含 3 个不同的值（类别）。问题是第一个值大约是 50000，另外两个大约是 (-3) - (3)。因此，在一张图表上绘制时，只有 2 个条形可见。我正在考虑将 LogRenderer 用于 y 轴，但它似乎根本不起作用。最好的选择是为每个刻度组（类别）设置不同的 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

谢谢

【问题讨论】：

标签： jquery jqplot bar-chart

【解决方案1】：

我自己一直在玩这个，希望这可以节省一些时间。

你需要为每个传入函数的序列定义一个单独的序列（在您的情况下为 s1 和 s2）。您定义它们的顺序对应于它们传递的顺序。

series: [
    {
        label: 'January 2012',
    }, 
    {
        yaxis:'y2axis',
        label: 'February 2012'
    }
],

...

axes: {
    xaxis: {
        },
        yaxis: {
            label: "y axis 1"
        },
        y2axis: {
            label: 'y axis 2',
        }
}

【讨论】：