Amchartsは表示されますが、コンソール出力は1つのエラー

Question

Amchartsを使ってグラフを表示しました。私はそれをBootstrapコンポーネントで作成します。続い私のhtml & jsのコードです：

<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は私のJSコードでグローバル変数であり、それはすでに初期化されます。私のページには以下のようにチャートが表示されます。 しかし、Chromeコンソールでは以下のようなエラー情報が表示されます。 私はしばらくの間デバッグし、このエラーがthis.chart.write（ "latencyChart"）で発生していることを確認します。エラーは未定義のプロパティ 'call'を読み取ることができません。次に、このページで "chartdiv"という新しいdivを作成して、プログラムがまだ動作するかどうかを確認し、this.chart.write（ "chartdiv"）を追加しました。元のものの後に。私は "chartdiv"にチャートがないことを発見し、エラーが続きます。

Answer 1

問題は、zoomChartメソッドをdataUpdatedイベントにアサインする方法です。that.zoomChart()は、イベントに割り当てるのではなく、zoomChartメソッドを呼び出しています。あなたはここでは、この修正とfiddleだ

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

すなわち

、それはイベント中に、あなたのオブジェクトのグラフのプロパティへのアクセス権を持つようにzoomChartを呼び出す関数を作成する必要があります。

あるいは、例えば、/など/道の代わりに、このいじるチャートオブジェクトにアクセスすることをしdataUpdated event's argument objectを使用することができます。

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