HighChart : 为多个图表绘制线条点击事件答案

【问题标题】：HighChart : plot line click event for multiple chartHighChart : 为多个图表绘制线条点击事件
【发布时间】：2017-01-26 15:02:20
【问题描述】：

我正在使用 highchart 进行一些向下钻取功能。

我有一个功能可以让用户单击区域图并添加一条线。但后来我发现我的函数有一个错误。这些图表之间应该只有一条红线，但是当用户单击另一个图表时，第一个图表上的现有红线不会被删除。

以下是我的图表分享的功能。

  var myPlotLineId = "myPlotLine";

    addPlotLine = function(evt) {
      var point = evt.point;
      var xValue = point.x;
      var xAxis = point.series.xAxis;

      Highcharts.each(xAxis.plotLinesAndBands, function(p) {
        if (p.id === myPlotLineId) {
          p.destroy();
        }
      });
      xAxis.addPlotLine({
        value: xValue,
        width: 1,
        color: 'red',
        id: myPlotLineId
      });
    };

由于我使用的是 ID，所以它应该只允许一条红线。

以下是目前的情况。

由于我使用 id 作为情节线，因此不应允许两行，请参阅我的示例：

http://jsfiddle.net/Xm4vW/74/

我只想要许多图表中的一条红线

更新 1：

我在新的演示中尝试过 redraw() ： http://jsfiddle.net/Xm4vW/80/

但这无济于事。如果问题不够清楚，请告诉我。

【问题讨论】：

而不是p.destroy()你试过p.redraw()
请看我的新更新，谢谢

标签： javascript jquery highcharts

【解决方案1】：

没有什么比得上'Highcharts.each(xAxis.plotLinesAndBands, function(p)'。循环迭代图表并使用'removePlotLine(PlotLineID)'而不是'destroy()'：

for(i=0;i<Highcharts.charts.length; i++){
    var chart=Highcharts.charts[i];
    chart.xAxis[0].removePlotLine('myPlotLineId');
}

并在括号中设置id：

id: 'myPlotLineId'

这里是 jsfiddle http://jsfiddle.net/asadsarwar89/bh4kz9rw/

【讨论】：

提前谢谢，我被Highchart的API文档弄糊涂了。