HighChart：プロットラインとプロットのクリックイベント

Question

いくつかのドリルダウン機能でハイチャートを使用しています。

私の場合、私はonclickイベントのエリアチャートを持っています。

私は、ユーザーが線を追加してグラフの色を変更するために領域プロットをクリックさせたいと思っています。したがって、私は2つの機能を持っています：1つはチャートの色を変更し、もう1つはユーザーがクリックした線を追加します。以下は

はプロットラインのクリックイベントである：

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フィドルデモ：http://jsfiddle.net/Xm4vW/70/

Answer 1

あなたはあなたのポイントをクリックしてイベントにplotLinesを追加変更することができます。私は2つの機能、plotLinesを追加するためのあなたのポイントの色（もホバー上）と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/