javascript - 当鼠标光标位于使用 highcharts 的图表上时如何渲染垂直线？

Question

我一直在开发一个使用 Highcharts 来绘制数据图表的 Web 应用程序。因此，要求之一是，当我将鼠标悬停在图表上时(下面的屏幕截图 - 假设箭头是鼠标光标)，一条垂直线将自动显示鼠标光标所在的位置。除此之外，当鼠标光标在图表内横向移动时，垂直线也会沿 x 轴移动。

这是示例图表。

这是我的 highchart 配置脚本:

    function plotChartData(dataseries, xtitle)
{
    myChart = new Highcharts.Chart({
        chart: {
            renderTo: 'trendspace',
            type: 'line',
            zoomType: 'xy',
            panning: true,
            panKey: 'shift',
            plotBorderWidth: 1
        },
        title: {
            text: ''
        },
        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'
                }
            }
        },
        yAxis: {
            gridLineColor: '#DDDDDD',
            gridLineWidth: 0.5
        },
        series: [{
            name: xtitle,
            data: dataseries,
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}</b><br/>',
                valueDecimals: 2
            }
        }]
    });
}

我浏览了 Highcharts API，但找不到实现这一目标的确切方法或配置。这在 Highchart 中可行吗？我怎样才能实现这个目标？

Answer 1

尝试设置您的tooltip crosshairs

tooltip: {
    crosshairs: [true]
}

或者如 @IronGeek 所写，使用 xAxis.CrossHairs