我有这个多系列线高图,它有一个固定的工具提示和一个十字准线 . 当十字准线沿x轴移动时,y轴点完美地呈现在固定的工具提示中 . 但是,我想补充一个额外的功能是在添加垂直情节线( chart.xAxis[0].addPlotLine )后,我还想在固定的工具提示中显示相应的y轴点和日期时间值( xAxis ) .

我不知何故跟着这个Highchart demo添加了一条垂直的情节线 . 但是,我似乎无法找到任何相关的演示或样本添加垂直情节线并相应地显示x轴和y轴点 . 这在Highchart中可行吗?

注意:通过按钮调用添加垂直绘图线,并将值传递给图表 .

高清配置代码

function plotChartData(seriesData, xTitle)
{
    myChart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            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'
                }
            },
            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>
', headerFormat: '<span style="font-size: 8px">{point.key}</span>
', 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: seriesData }] }); }

在x轴中添加绘图线的代码 . fixedLineDateTime 是单击按钮后传递的值 .

if (myChart.xAxis[0].plotLinesAndBands.length === 0 || myChart.xAxis[0].plotLinesAndBands.length === null) {
        myChart.xAxis[0].addPlotLine({
            value: +moment(fixedLineDateTime),
            color: 'red',
            width: 1,
            id: 'plot-vertical-id'
        });
    }

任何帮助是极大的赞赏 .