Question

我有这样的图表jsfiddle

这是我的plotOptions和Series

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-index应高于区域填充，并且高于网格线。但网格线的z-index应高于区域填充

谢谢。

Answer 1

您必须使用series.index选项。

请参阅：http://api.highcharts.com/highcharts#series.index

这是描述：

index：NumberSince 2.3.0

图表中系列的索引，影响chart.series数组中的内部索引，可见Z索引以及图例中的顺序。

代码示例

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/

Answer 2

删除不透明度时，图表看起来像您的图像：

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: 0.1
}]

http://jsfiddle.net/nbLjtLjy/1/

或者我错过了什么？

Answer 3

您可以使用允许在图表上打印自定义元素的渲染器。

http://api.highcharts.com/highcharts#Renderer.text

如何在highcharts中为区域线制作z-index？

3 个答案: