angular2-highchartsシリーズハイライト

Question

私はangular2-highchartsチャートを持っています。私は、どのラインがクリックされたかに基づいてデータ系列の選択ラインを強調表示したい。私は次のコードを使用しています。エラーが表示されます。

未定義のプロパティ 'series'を読み取ることができません。

私のシリーズは定義済みで、名前、データ、色、幅の要素があります。

this.options={ 
    title : { text : 'Sample' }, 
    legend:{enabled:false}, 
    plotOptions:{ 
     series:{ 
      events:{ 
       mouseOver:function(){ 
       var m=this.series.options.id; 
       var abc=series; 
       var new_series=[]; 
       for(var i=0;i<abc.length;i++) 
        {abc[i].color='black';} 
       abc[m].color='red'; 
       for(var i=0;i<chart.series.length;i++) 
        {chart.series[i].remove(); 
        new_series.push({name:abc[i].name,data:abc[i].data,color:abc[i].color}) 
        } 
       chart.addSeries(new_series,false); 
       chart.redraw(); 

       } 
      } 
     }, 
    }, 

    series:series, 
    xAxis:{title:{text:'X'}}, 
    yAxis:{title:{text:'Y'}}, 
} 

$('#conatainer').highcharts(this.options) 
var chart=$('#conatainer').highcharts(); 

私は、チャートが参照されている方法でエラーが発生していると推測しています。私はtypescriptでそれを参照する方法がわからず、そうするためにJavaスクリプトでいくつかの例を調べました。

これを修正する方法を知っておくと非常に役に立ちます。

Answer 1

あなたは、チャートパラメータに関するangular2-highcharts

class AppComponent { 
    constructor() { 
     this.options = { 
      title : { text : 'simple chart' }, 
      plotOptions:{ 
         series:{ 
          events: { 
         click: function(e) { 

         let series=this.chart.series; 
         for(let i=0;i<series.length;i++){ 

          if(i==this.index){ 
          this.chart.series[i].options.color = "#008800"; 
          this.chart.series[i].update(this.chart.series[i].options); 
          }else{ 

          this.chart.series[i].options.color = "#7cb5ec"; 
          this.chart.series[i].update(this.chart.series[i].options); 
          } 

         } 

         } 
        }, 
       }, 
      }, 
      series: [{ 
       data: [29.9, 71.5, 106.4, 129], 
       color : "#7cb5ec" 
      },{ 
       data: [19.9, 21.5, 6.4, 29], 
       color : "#7cb5ec" 
      },{ 
       data: [10.9, 15.5, 30.4, 45], 
       color : "#7cb5ec" 
      }] 
     }; 
    } 
    options: Object; 

} 

Plunker