Question

我有一个带有2个yAxis的图表。

我需要一条尖峰线来指向女巫图表线，就像这样来自女巫yAxis

我想要的例子：

我尝试使用十字准线，但这不是我想要的，因为它既指向yAxis，又指向一个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点事件中，您可以使用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

如何在highchart中添加spikeLine？

1 个答案: