Как добавить spikeLine в старшую таблицу?

Question

У меня есть диаграмма с 2 осями.

Мне нужна линия спайка, чтобы указать линию диаграммы ведьмы от ведьмы yAxis, как это

примерчто я хочу:

Я пытался использовать перекрестие, но это не то, что я хочу, потому что оно указывает на обе оси, и я хочу указать только одну ось.

Пример с перекрестием

Кто-нибудь знает, как это сделать?

Это код:

Highcharts.chart('container', {
chart: {
    marginRight: 80 // like left
},
xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    crosshair:true
},
yAxis: [{
    lineWidth: 1,
    title: {
        text: 'Primary Axis'
    },
    crosshair:true
}, {
    lineWidth: 1,
    opposite: true,
    title: {
        text: 'Secondary Axis'
    }
}],

series: [{
    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]
}, {
    data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2],
    yAxis: 1
}]});

Answer 1

В событии mouseOver point вы можете использовать Highcharts.SVGRenderer, чтобы добавить элемент path, который будет линией шипа:

function drawSpikeLine() {
    var point = this,
        chart = point.series.chart,
        plotLeft = chart.plotLeft,
        opposite = point.series.yAxis.opposite,
        x1 = point.plotX + plotLeft,
        x2 = opposite ? plotLeft + chart.plotWidth : plotLeft,
        y = point.plotY + chart.plotTop;

    point.spikeLine = [];

    point.spikeLine[0] = chart.renderer.path(['M', x1, y, 'L', x2, y])
        .attr({
            'stroke-width': 2,
            stroke: 'red'
        })
        .add();

    point.spikeLine[1] = chart.renderer.path([
            'M', x1, y,
            'L', x1, chart.plotTop + chart.plotHeight
        ])
        .attr({
            'stroke-width': 2,
            stroke: 'red'
        })
        .add();
}

function removeSpikeLine() {
    this.spikeLine[0].destroy();
    this.spikeLine[1].destroy();
}

Highcharts.chart('container', {
    ...,

    plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: drawSpikeLine,
                    mouseOut: removeSpikeLine
                }
            }
        }
    }
});

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/cd18h7v2/

Справочник по API:

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path

https://api.highcharts.com/highcharts/plotOptions.series.events