angular2-highcharts系列亮點

我有一張angular2-highcharts圖表。我想突出顯示基於點擊哪一行的數據系列中的選定行。我正在使用以下一段代碼來執行此操作，並且我收到一條錯誤消息：angular2-highcharts系列亮點

無法讀取未定義的屬性「系列」。

我有我的系列預定義，它有名稱，數據，顏色和寬度的元素。

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

我猜錯誤是在圖表被引用的方式。我不確定如何在打字稿中引用它，並在java腳本中查找幾個例子來實現。

這將是非常有用的知道如何糾正這一點。

來源

2016-08-26 Vysh

什麼有關圖表參數上點擊實現系列的亮點？在製作圖表之前，我沒有看到您在選項中定義了它。如果您使用chart.series並且圖表未定義，則會導致錯誤。 –

可以使用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

來源

2017-12-16 11:58:42

angular2-highcharts系列亮點

回答

相關問題