2016-07-10 82 views
1

我想添加一個點在onclick事件中的系列,但是我得到一個錯誤,那就是addSeries不是當前這個功能。 當我點擊他的一個要點時,如何將Series添加到HighChart圖中? 我加入以下的jsfiddle來說明問題:如何在HighChart中添加系列

$(function() { 
 
    $('#container').highcharts({ 
 
     chart: { 
 
      type: 'scatter', 
 
      margin: [70, 50, 60, 80], 
 
      events: { 
 
       click: function (e) { 
 
        // find the clicked values and the series 
 
        var x = e.xAxis[0].value, 
 
         y = e.yAxis[0].value, 
 
         series = this.series[0]; 
 

 
        // Add it 
 
        series.addPoint([x, y]); 
 

 
       } 
 
      } 
 
     }, 
 
     title: { 
 
      text: 'User supplied data' 
 
     }, 
 
     subtitle: { 
 
      text: 'Click the plot area to add a point. Click a point to remove it.' 
 
     }, 
 
     xAxis: { 
 
      gridLineWidth: 1, 
 
      minPadding: 0.2, 
 
      maxPadding: 0.2, 
 
      maxZoom: 60 
 
     }, 
 
     yAxis: { 
 
      title: { 
 
       text: 'Value' 
 
      }, 
 
      minPadding: 0.2, 
 
      maxPadding: 0.2, 
 
      maxZoom: 60, 
 
      plotLines: [{ 
 
       value: 0, 
 
       width: 1, 
 
       color: '#808080' 
 
      }] 
 
     }, 
 
     legend: { 
 
      enabled: false 
 
     }, 
 
     exporting: { 
 
      enabled: false 
 
     }, 
 
     plotOptions: { 
 
      series: { 
 
       lineWidth: 1, 
 
       point: { 
 
        events: { 
 
         'click': function() { 
 
          if (this.series.data.length > 1) { 
 
           this.remove(); 
 
           this.addSeries({ 
 
           name:'series1', 
 
           color: "red", 
 
           data:[10,20,30,40] 
 
           }); 
 
          } 
 
         } 
 
        } 
 
       } 
 
      } 
 
     }, 
 
     series: [{ 
 
      data: [[20, 20], [80, 80]] 
 
     }] 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; max-width: 700px; margin: 0 auto"></div>

回答

2

檢查this出來。我console.logthis它指的是Point而不是Chart,這就是爲什麼說addSeries的錯誤不是this的功能。

修改它與$('#container').highcharts().addSeries它的工作原理。