2016-07-10 5 views
1

Ich möchteSeries in onclick -Ereignis eines Punktes hinzufügen, aber ich habe einen Fehler, dass addSeries keine Funktion der aktuellen ist. Wie kann ich Serien zu HighChart Graph hinzufügen, wenn ich auf einen seiner Punkte klicke? Ich füge die folgende jsfiddle das Problem zu demonstrieren:So fügen SieSeries in HighChart hinzu

$(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>

Antwort

2

prüfen this aus. I console.log der this und es bezieht sich auf den Punkt anstelle von Diagramm, und das ist der Grund, warum der Fehler addSeries ist keine Funktion von this.

Geändert mit $('#container').highcharts().addSeries und es funktioniert.