HighChart: сюжетная линия и график события click

Question

Я использую highchart для некоторых функций детализации.

В моем случае у меня есть диаграмма области с событием onclick.

Я хочу, чтобы пользователь нажал на участок, чтобы добавить строку и изменить цвет диаграммы. Поэтому у меня есть две функции: одна меняет цвет диаграммы и добавляет линию сюжета, где пользователь нажал.

Ниже события сюжетной линии нажмите:

chart: { 
     type: 'area', 
     events: { 
     click: function(evt) { 
      var xValue = evt.xAxis[0].value; 
      var xAxis = evt.xAxis[0].axis; 
      $.each(xAxis.plotLinesAndBands,function(){ 
       if(this.id===myPlotLineId) 
        { 
         this.destroy(); 
         } 
       }); 
       xAxis.addPlotLine({ 
        value: xValue, 
        width: 1, 
        color: 'red', 
        //dashStyle: 'dash',     
        id: myPlotLineId 
        }); 
        } 
       }    
      }, 

И это событие обновления цвета, который находится внутри plotOptions

plotOptions: { 
      series: { 
      point: { 
      events: { 
       click: function(event) { 
        //selector 
        if(previousPoint){ 
         previousPoint.update({ color: '#FFC7C3' }); 
         } 
         this.update({ color: '#fe5800' }); 

         //drilldown trigger 
         var date = this.category.replace(/\-/g,'') 
         $("#datepicker").click(); 
         //put somewhere else not in the custom 
         $("#drilldowndate").html(parseInt(date)); 

         $(window).scrollTop(1700); 

         window.setTimeout(function(){ 
          $("#trendDrill").click(); 
          },500); 

         window.setTimeout(function(){ 
          $("#periodChecker").text($(".ifNoDrill").data("target")); 
          },1000); 
         }    
        } 
       } 
      } 
     }, 

И я хотел бы, чтобы addplotline функции и обновления чтобы работать с одним и тем же кликом, поэтому, когда пользователь нажимает на нужную область, диаграмма изменяет определенный цвет и появляется линия графика.

JS скрипка Demo:http://jsfiddle.net/Xm4vW/70/

Answer 1

Вы можете изменить добавить сюжетные в вашем случае точки щелчка. Я сделал две функции, одна отвечает за изменение цвета вашей точки (также при наведении курсора мыши) и один для добавления сюжетных:

var updatePoint = function(point) { 
     if (previousPoint) { 
     previousPoint.update({ 
      color: '#7cb5ec', 
      marker: { 
      states: { 
       hover: { 
       fillColor: '#7cb5ec', 
       } 
      } 
      } 
     }); 
     } 
     previousPoint = point; 
     point.update({ 
     color: '#fe5800', 
     marker: { 
      states: { 
      hover: { 
       fillColor: '#fe5800', 
      } 
      } 
     } 
     }); 
    }, 
    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 
     }); 
    }; 

Вы можете использовать эти функции внутри клик функции события:

point: { 
    events: { 
    click: function(event) { 
     updatePoint(this); 
     addPlotLine(event); 
    } 
    } 
} 

Здесь вы можете найти пример, как он может работать: http://jsfiddle.net/Xm4vW/72/