在jqPlot中没有为y3axis显示网格线

Question

请查看此jsfiddle example。

 series: [{
        yaxis: 'yaxis',
        tickOptions: {
            showGridline: true
        }
    }, {
        yaxis: 'y3axis',
        tickOptions: {
            showGridline: true
        }
    }, {
        yaxis: 'yaxis',
        tickOptions: {
            showGridline: true
        }
    }]

没有针对y3axis的网格线。

还有this example，

series: [{
        yaxis: 'y3axis',           
        tickOptions: {
            showGridline: true
        }
    }, {
        yaxis: 'y3axis',
        tickOptions: {
            showGridline: true
        }
    }, {
        yaxis: 'y3axis',
        tickOptions: {
            showGridline: true
        }
    }]

如果所有系列都针对y3axis绘制，则根本没有网格线。 y4轴也是如此。

有人可以帮助我如何为y3axis显示网格线吗？

Answer 1

您遇到此问题是因为您在使用'y2axis'之前使用'y3axis'。在你的第一个jsFiddle中，将'y3axis'更改为'y2axis'（即yaxis：'y2axis'），然后您将看到所有的网格线。同样，如果您在第二个jsFiddle中将'y3axis'更改为'yaxis'，您将再次看到所有网格线。

由于您的数据集之间的y值差别很大，为什么不渲染图表，以便在屏幕上清晰可辨出所有三个y轴，如下所示？ ：

请参阅此jsfiddle了解我是如何做到的。

用于渲染此图表的jqPlot代码是：

      var plot1 = $.jqplot('chart1', [line1, line2, line3], {
        title:'Plot with 3 Y-Axes', 
        series:[
            {},
            {yaxis:'y2axis'}, 
            {yaxis:'y3axis'}
        ], 
        axesDefaults:{useSeriesColor: true}, 
        axes:{
            xaxis:{min:0, max:7, numberTicks: 8}, 
            yaxis:{min:0, max:60, label: 'line1'},  
            y2axis:{
                min:2000, 
                max:70000,
                tickOptions: { showGridline: false }, label: 'line2'
            }, 
            y3axis:{ label: 'line3'}
        },
        highlighter: {
            show: true,
            sizeAdjust: 1
        }
    });

也不是我如何使用荧光笔选项，因此当用户将鼠标悬停在绘图点上时，很容易看到某个点的x和y值。

请参阅here，了解您可以采用的另一种方法，即使用jqPlots缩放工具。