HighChart：绘制多个图表的点击事件 [英] HighChart : plot line click event for multiple chart

问题描述

我有一个让用户点击区域图并添加一行的功能。但后来我发现我的功能有一个bug。这些图表之间应该只有一条红线，但是当用户点击其他图表时，第一张图表上的现有红线不会被删除。

下面是我的图表共享功能。

  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/ $ b

我只需要在许多图表中添加一条红线

更新1：

我在新演示中尝试了redraw（）：
http://jsfiddle.net/Xm4vW/80/

但它没有帮助。
如果问题不够清楚，请告诉我。 没有什么比'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/

I am using highchart for some drilldown functions.

I having a function to let the user click on an area plot and add a line. But then i found out my function has a bug in it. There's should be only one red line between those charts, but when the user click on the other chart the existing red line on the first chart is not removing.

The belowing is the function my charts sharing.

  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
      });
    };

It should only allow one red line since i am using ID.

The below is the current situation.

Since i am using id for the plotline is shouldn't allow two line, please see my example:

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

I want only ONE RED LINE in total out of many charts

UPDATE 1 :

I have tried redraw() in the new demo : http://jsfiddle.net/Xm4vW/80/

but it doesn't help. Please do let me know if the question is not clear enough.

解决方案

There is nothing like 'Highcharts.each(xAxis.plotLinesAndBands, function(p) '. Iterate charts by loop and use 'removePlotLine(PlotLineID)' instead of 'destroy()':

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

And set id in parenthesis:

id: 'myPlotLineId'

here is jsfiddle http://jsfiddle.net/asadsarwar89/bh4kz9rw/

这篇关于HighChart：绘制多个图表的点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！