Amcharts gezeigt, aber Konsolenausgabe ein Fehler

Question

Ich benutzte Amcharts, um ein Diagramm anzuzeigen, und ich mache ein div für es in einer Bootstrap-Komponente. Gefolgt ist mein html & js Code:

<fieldset> 
    <legend>Chart</legend> 
    <div class="row"> 
    <form class="form-horizontal mb-sm line-height-3"> 
     <div class="col-sm-3 col-md-3"> 
     <div class="form-group"> 
      <label for="submitStartTime" class="col-sm-3 control-label">Start Time</label> 
      <div class="col-sm-6"> 
       <label id="submitStartTime"></label> 
      </div> 
     </div> 
     <div id="latencyChart" class="col-sm-9 col-md-9" style="height: 400px;"></div> 
    </form>       
    </div> 
</fieldset> 

js:

drawChart: function(graphType){ 
      var that = this; 

      that.generateChartData(); 

      this.chart.dataProvider = this.chartData; 
      this.chart.categoryField = "date"; 
      this.chart.balloon.bulletSize = 5; 

      // listen for "dataUpdated" event (fired when chart is rendered) and call zoomChart method when it happens 
      this.chart.addListener("dataUpdated", that.zoomChart()); 

      // AXES 
      // category 
      var categoryAxis = this.chart.categoryAxis; 
      categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true 
      categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD 
      categoryAxis.dashLength = 1; 
      categoryAxis.minorGridEnabled = true; 
      categoryAxis.twoLineMode = true; 
      categoryAxis.dateFormats = [{ 
       period: 'fff', 
       format: 'JJ:NN:SS' 
      }, { 
       period: 'ss', 
       format: 'JJ:NN:SS' 
      }, { 
       period: 'mm', 
       format: 'JJ:NN' 
      }, { 
       period: 'hh', 
       format: 'JJ:NN' 
      }, { 
       period: 'DD', 
       format: 'DD' 
      }, { 
       period: 'WW', 
       format: 'DD' 
      }, { 
       period: 'MM', 
       format: 'MMM' 
      }, { 
       period: 'YYYY', 
       format: 'YYYY' 
      }]; 

      categoryAxis.axisColor = "#DADADA"; 

      // value 
      var valueAxis = new AmCharts.ValueAxis(); 
      valueAxis.axisAlpha = 0; 
      valueAxis.dashLength = 1; 
      this.chart.addValueAxis(valueAxis); 

      // GRAPH 
      var graph = new AmCharts.AmGraph(); 
      graph.title = "red line"; 
      graph.valueField = "visits"; 
      graph.bullet = "round"; 
      graph.bulletBorderColor = "#FFFFFF"; 
      graph.bulletBorderThickness = 2; 
      graph.bulletBorderAlpha = 1; 
      graph.lineThickness = 2; 
      graph.lineColor = "#5fb503"; 
      graph.negativeLineColor = "#efcc26"; 
      graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection 
      this.chart.addGraph(graph); 

      // SCROLLBAR 
      var chartScrollbar = new AmCharts.ChartScrollbar(); 
      this.chart.addChartScrollbar(chartScrollbar); 

      this.chart.creditsPosition = "bottom-right"; 

      // WRITE 
      this.chart.write("latencyChart"); 
      this.chart.write("chartdiv"); 
     }, 

     // this method is called when chart is first inited as we listen for "dataUpdated" event 
     zoomChart: function() { 
      // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues 
      this.chart.zoomToIndexes(this.chartData.length - 40, this.chartData.length - 1); 
     }, 

     generateChartData: function(){ 
      var firstDate = new Date(); 
      firstDate.setDate(firstDate.getDate() - 10); 
      for (var i = 0; i < 10; i++) { 
       // we create date objects here. In your data, you can have date strings 
       // and then set format of your dates using chart.dataDateFormat property, 
       // however when possible, use date objects, as this will speed up chart rendering. 
       var newDate = new Date(firstDate); 
       newDate.setDate(newDate.getDate() + i); 

       var visits = Math.round(Math.random() * 40) - 20; 

       this.chartData.push({ 
        date: newDate, 
        visits: visits 
       }); 
      } 
     }, 

this.chart ist eine globale Variable in meinem JS-Code, und es ist bereits initialisiert. Und das Diagramm wird auf meiner Seite wie folgt angezeigt. Aber Chrome-Konsole geben einige Fehlerinformationen wie unten. Ich debuggte für einige Zeit und finden Sie heraus, dass der Fehler in this.chart.write ("LatencyChart") auftritt. Der Fehler ist nicht lesen Eigenschaft 'call' von undefined. Dann habe ich ein neues div auf dieser Seite namens "chartdiv" erstellt, um zu wissen, ob das Programm noch funktioniert, und ich habe dies hinzugefügt. Chart.write ("chartdiv"); nach dem Original. und ich habe festgestellt, dass es in "chartdiv" kein Diagramm gibt und der Fehler weitergeht.

Answer 1

Das Problem besteht darin, wie Sie die Methode zoomChart für Ihr datenaktualisiertes Ereignis anfordern - that.zoomChart() ruft die zoomChart-Methode auf, anstatt sie dem Ereignis zuzuweisen. Sie müssen eine Funktion erstellen, die zoomChart ruft, so dass es den Zugriff auf das Objekt des Diagramms Eigenschaft während des Ereignisses hat, das heißt

this.chart.addListener("dataUpdated", function() { 
    that.zoomChart() 
}); 

hier ein fiddle mit diesem Update.

Alternativ können Sie die dataUpdated event's argument object verwenden das Diagrammobjekt zuzugreifen, die Art und Weise, anstatt mit dieser Hantieren/das/etc, zum Beispiel:

this.chart.addListener("dataUpdated", that.zoomChart); 

// ... 

    zoomChart: function(e) { 
    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues 
    e.chart.zoomToIndexes(e.chart.dataProvider.length - 40, e.chart.dataProvider.length - 1); 
    }, 

Fiddle