javascript - 如何使用 highchart 在密集系列中突出垂直绘制线？

Question

我有一张图表，可以一次性加载 5 年的数据。而且，其功能之一是用户可以通过单击按钮添加垂直(x 轴)绘图线。正如您在屏幕截图中看到的，红色垂直线位于密集线系列的后面。在 highchart 中是否有办法使这条垂直线从系列线中脱颖而出(重叠)？

Highcharts 代码

    myChart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            zoomType: 'xy',
            panning: true,
            panKey: 'shift',
            plotBorderWidth: 1
        },
        legend: {
            layout: 'horizontal',
            align: 'left',
            itemDistance: 10,
            borderWidth: 0,
            itemMarginTop: 0,
            itemMarginBottom: 0,
            padding: 20
        },
        plotOptions: {
            series: {
                states: {
                    hover: {
                        enabled: false
                    }
                },
                dataLabels: {
                    enabled: false,
                    format: '{y}'
                },
                allowPointSelect: false
            }
        },
        xAxis: {
            type: 'datetime',
            labels: {
                rotation: -65,
                style: {
                    fontSize: '9px',
                    fontFamily: 'Verdana, sans-serif'
                }
            },
            crosshair: true,
            dateTimeLabelFormats: {
                day: '%d %b %Y %I:%M %P'
            }
        },
        yAxis: {
            gridLineColor: '#DDDDDD',
            gridLineWidth: 0.5
        },
        tooltip: {
            positioner: function () {
                return {
                    x: this.chart.plotLeft,
                    y: this.chart.plotTop
                }
            },
            useHTML: true,
            pointFormat: '<small><font color="{series.color}"><strong>{series.name}</strong></font>: <strong>{point.y}</strong></small><br/>',
            headerFormat: '<span style="font-size: 8px">{point.key}</span><br/>',
            xDateFormat: '%d-%m-%Y %H:%M:%S',
            shared: true,
            valueDecimals: 2,
            shadow: false,
            borderWidth: 0,
            backgroundColor: 'rgba(255,255,255,0.8)'
        },
        series: [{
            name: xTitle,
            data: dataSeries
        }]
    });

我尝试用谷歌搜索，但似乎找不到任何类似的案例。

非常感谢任何帮助。

Answer 1

要在图形上渲染绘图线，请使用 plotLines 选项对象的 zIndex 属性。通过测试，看起来 zIndex 值等于或大于 3 会将其呈现在图表线上方。我将其设置为 4 只是因为我在 api 文档中看到对该值的引用。更新后的图表 plotLines 选项如下所示:

chart.xAxis[0].addPlotLine({
   value: 6.5,
   color: 'red',
   width: 2,
   id: 'plot-line-1',
   zIndex:4
});

我已更新您的 jsFiddle 以包含这些更改:

<强> jsFiddle