javascript - 如何为 Highcharts 中的区域线创建 z 索引？

Question

我有这样的图表jsfiddle

这是我的绘图选项和系列

plotOptions: {
        area: {
            marker: {
                enabled: false
            },
            states: {
                hover: {
                    enabled: false
                }
            }
        }
    }


series: [{
        data: [9.9, 51.5, 66.4, 49.2, 84.0, 186.0, 15.6, 198.5, 96.4, 134.1, 105.6, 24.4],
        color: '#f8f3ee',
        lineColor: '#e6d7c2',
        fillOpacity: 1
    }, {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        color: '#f8f3ee',
        lineColor: '#bd965d',
        lineWidth: 2,
        fillOpacity: 1
    }]

有 2 个区域，具有相同的填充颜色、相同的不透明度:1 和 Y/X 网格线。

是否可以以某种方式为区域线设置 z-index？

这就是我所需要的。 image

因此，两条区域线的 z 索引都应高于区域填充，并高于网格线。但网格线的 z-index 应该高于区域填充

谢谢。

Answer 1

您必须使用series.index选项。

参见:http://api.highcharts.com/highcharts#series.index

这是描述:

index: NumberSince 2.3.0

The index of the series in the chart, affecting the internal index in the chart.series array, the visible Z index as well as the order in the legend.

代码示例

series: [{
    index:2,
    data: [9.9, 51.5, 66.4, 49.2, 84.0, 186.0, 15.6, 198.5, 96.4, 134.1, 105.6, 24.4],
    color: '#f8f3ee',
    lineColor: '#e6d7c2',
    fillOpacity: 1
}, {
    index: 1,
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    color: '#f8f3ee',
    lineColor: '#bd965d',
    lineWidth: 2,
    fillOpacity: 1
}]

展示如何使用它的 jsfiddle。

http://jsfiddle.net/vaa2uqpt/1/