Javascript 如何显示额外的y轴，以及需要在JqPlot中将线系列绑定到y轴

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

供参考

---

就像我需要的一样，任何示例代码都非常受欢迎

这里是一个关于如何在

JqPlot

中使用2

Yaxis

的示例：

---

下面是我在其中一个应用程序中使用的代码，希望这对您有所帮助。在下面的代码中，我使用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"],

var barseries=new Array（）；
var lineseries=新数组（）；
var barseries2=新数组（）；
var lineseries2=新数组（）；
var Items=JSON.parse（xhAreaName.responseText）//将xhr响应解析为json
对于（var i=0；i

        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"],