javascript - 如何在 JqPlot 中显示额外的 y 轴并需要将线系列绑定(bind)到它

Question

我正在使用 JavaScript 开发一个 Windows 商店应用程序，我在其中以图形方式显示数据(如图表、表格)。在其中一个图表中，我需要显示两个 y 轴，我有四个系列(两个条形系列和两个线系列)条形系列需要绑定(bind)到左侧 y 轴，线系列需要绑定(bind)到右侧 y 轴。

仅供引用

如我需要，非常感谢任何示例代码

Answer 1

下面是我在其中一个应用程序中使用的代码，希望对您有所帮助。在下面的代码中，我正在使用 ajax 调用，我正在解析对 json 的请求以及我正在使用 jqplot 图表的数据集。

        var barseries = new Array();
        var lineseries = new Array();

        var barseries2 = new Array();
        var lineseries2 = new Array();

        var Items = JSON.parse(xhAreaName.responseText);//Parsing the xhr response to json

        for (var i = 0; i < Items.GetChartDataResult.length; i++) {
            barseries[i] = new Array(2);
            lineseries[i] = new Array(2);

            barseries2[i] = new Array(2);
            lineseries2[i] = new Array(2);

            barseries[i][0] = Items.GetChartDataResult[i].AreaName;
            barseries[i][1] = Items.GetChartDataResult[i].Actual * 1000;

            barseries2[i][0] = Items.GetChartDataResult[i].AreaName;
            barseries2[i][1] = Items.GetChartDataResult[i].Budget * 1000;

            lineseries[i][0] = Items.GetChartDataResult[i].AreaName;
            lineseries[i][1] = Items.GetChartDataResult[i].AttainValue * 100;

            lineseries2[i][0] = Items.GetChartDataResult[i].AreaName;
            lineseries2[i][1] = Items.GetChartDataResult[i].Target * 100;

            $('.jqplot-series-' + i).css('color', '#ffffff');

        }

        var plot1 = $.jqplot('AreaNameChart', [barseries, lineseries, barseries2, lineseries2], {
            series: [{ renderer: $.jqplot.BarRenderer }, { xaxis: 'x2axis', yaxis: 'y2axis' }, { renderer: $.jqplot.BarRenderer }, { xaxis: 'xaxis', yaxis: 'y2axis' }],
            seriesDefaults: {
                pointLabels: { show: true },
                rendererOptions: { fillToZero: true }
            },
            axesDefaults: {
                show: false,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                rendererOptions: {
                    drawBaseline: false
                }
            },
            grid: {
                backgroundColor: 'transparent',
                color: 'White'
            },
            //legend: {
            //    show: true,
            //    placement: 'outsideGrid'
            //},
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    tickOptions: {
                        showGridline: false
                    }
                },
                x2axis: {

                    renderer: $.jqplot.CategoryAxisRenderer,
                    tickOptions: {
                        showGridline: false,
                        showTicks: false
                    },
                    labelOptions: {
                        show: true,

                    },
                },
                yaxis: {
                    pad: 1.05,
                    tickOptions: { formatString: '$%d', showGridline: false, labelPosition: 'middle' }
                },
                y2axis: {
                    tickOptions: { formatString: '%d%', showGridline: false, labelPosition: 'middle' }
                }
            },
            seriesColors: ["#1e98e4", "#98b954", "#ffc500", "#695188"],