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

Question

我正在使用 JavaScript 开发一个 Windows 商店应用程序，其中我以图形方式显示数据（如图表、表格）。在其中一个图表中，我需要显示两个 y 轴，并且我有四个系列（两个栏-系列和两个线系列）条形系列需要绑定到左侧y轴，线系列需要绑定到右侧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"],

Answer 2

这里有一个关于如何使用 2 的示例Yaxis：JqPlotJsFiddle Link

$.jqplot.config.enablePlugins = true;
var chartData = [["19-Jan-2012", 2.61], ["20-Jan-2012", 5.00], ["21-Jan-2012", 6.00]];
var chartData1 = [["19-Jan-2012", 20], ["20-Jan-2012", 30], ["21-Jan-2012", 50]];

function PlotChart(chartData, extraDays) {

    var plot2 = $.jqplot('chart1', [chartData,chartData1], {
        title: 'Mouse Cursor Tracking',
        seriesDefaults: {

            pointLabels: {
                show: true
            }
        },
        series:[
            {
                yaxis:'yaxis'   
            },
            {
                yaxis:'y2axis'   
            }
            ],
        axes: {
            xaxis: {
                pad: 1,
                // a factor multiplied by the data range on the axis to give the            
                renderer: $.jqplot.CategoryAxisRenderer,
                // renderer to use to draw the axis,     
                tickOptions: {
                    formatString: '%b %#d',
                    formatter: $.jqplot.DateTickFormatter
                }
            },
            yaxis: {
                tickOptions: {
                    formatString: '$%.2f'
                }
            },
            y2axis: {
                tickOptions: {
                    formatString: '$%.2f'
                }
            }
        },
        highlighter: {
            sizeAdjust: 7.5
        },
        cursor: {
            show: true
        }
    });
}

PlotChart(chartData, 3);