1

请看一下这个jsfiddle 示例。

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

没有针对 y3axis 刻度的网格线。

还有这个例子，

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

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

有人可以帮助我如何使网格线也出现在 y3axis 上吗？

4

1 回答 1

0

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

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

在此处输入图像描述

请参阅this 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 值。

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

于 2013-10-26T20:10:43.107 回答