Javascript 显示了图表，但控制台输出一个错误

我使用Amcharts显示图表，并在引导组件中为其创建div。下面是我的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:函数（graphType）{
var=这个；
即.generateChartData（）；
this.chart.dataProvider=this.chartData；
this.chart.categoryField=“日期”；
this.chart.balloon.bulletSize=5；
//侦听“dataUpdated”事件（在呈现图表时激发），并在事件发生时调用zoomChart方法
this.chart.addListener（“dataUpdated”，that.zoomChart（））；
//斧头
//类别
var categoryAxis=this.chart.categoryAxis；
categoryAxis.parseDates=true；//由于我们的数据是基于日期的，所以我们将parseDates设置为true
categoryAxis.minPeriod=“DD”//我们的数据是每日的，所以我们将minPeriod设置为DD
categoryAxis.dashLength=1；
categoryAxis.minorGridEnabled=true；
categoryAxis.twoLineMode=true；
categoryAxis.dateFormats=[{
句号：“fff”，
格式：“JJ:NN:SS”
}, {
句号：“ss”，
格式：“JJ:NN:SS”
}, {
句号：“mm”，
格式：“JJ:NN”
}, {
句号：“hh”，
格式：“JJ:NN”
}, {
句号：'DD'，
格式：“DD”
}, {
句号：“WW”，
格式：“DD”
}, {
句号：“MM”，
格式：“嗯”
}, {
期间：“YYYY”，
格式：“YYYY”
}];
categoryAxis.axisColor=“#DADADA”；
//价值观
var valueAxis=新的AmCharts.valueAxis（）；
valueAxis.axisAlpha=0；
valueAxis.dashLength=1；
此.chart.addValueAxis（valueAxis）；
//图表
var-graph=新的AmCharts.AmGraph（）；
graph.title=“红线”；
graph.valueField=“访问”；
graph.bullet=“圆形”；
graph.bulletBorderColor=“#FFFFFF”；
图1：厚度=2；
图1.1α=1；
图1.lineThickness=2；
graph.lineColor=“#5fb503”；
graph.negativeLineColor=“#efcc26”；
graph.hidebulletscont=50；//这使得图表在选择的序列超过50个时隐藏项目符号
this.chart.addGraph（图形）；
//滚动条
var chartScrollbar=新的AmCharts.chartScrollbar（）；
this.chart.addChartScrollbar（chartScrollbar）；
this.chart.creditsPosition=“右下角”；
//写
这个.chart.write（“latencyChart”）；
这个.chart.write（“chartdiv”）；
},
//当我们侦听“DataUpdate”事件时，第一次初始化图表时，调用此方法
zoomChart:函数（）{
//可以使用不同的缩放方法-ZoomToIndex、zoomToDates、zoomToCategoryValues
this.chart.ZoomToIndex（this.chartData.length-40，this.chartData.length-1）；
},
generateChartData:函数（）{
var firstDate=新日期（）；
firstDate.setDate（firstDate.getDate（）-10）；
对于（变量i=0；i<10；i++）{
//我们在这里创建日期对象。在数据中，可以有日期字符串
//然后使用chart.dataDateFormat属性设置日期的格式，
//但是，如果可能，请使用日期对象，因为这将加快图表渲染速度。
var newDate=新日期（firstDate）；
newDate.setDate（newDate.getDate（）+i）；
var访问=Math.round（Math.random（）*40）-20；
这个是.chartData.push({
日期：newDate，
访问：访问
});
}
},

在我的js代码中，this.chart是一个全局变量，它已经初始化。图表显示在我的页面中，如下所示。 但是Chrome控制台会给出如下错误信息。

---

我调试了一段时间，发现错误发生在这个.chart.write（“latencyChart”）中。错误为无法读取未定义的属性“call”。然后我在这个页面中创建了一个名为“chartdiv”的新div，以了解程序是否仍然可以工作，并添加了这个.chart.write（“chartdiv”）；在原来的那个之后。我发现“chartdiv”中没有图表，错误还在继续

问题在于如何将

zoomChart

方法分配给数据更新事件-

即.zoomChart（）调用zoomChart方法，而不是将其分配给事件。您需要创建一个调用zoomChart的函数，以便它能够在事件期间访问对象的图表属性，即

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

这是一个解决方案

或者，您可以使用以这种方式访问图表对象，而不是摆弄这个/那个/等等，例如：

  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);
  },

我不明白您是要创建两个图表还是只创建一个图表？如果您正试图这样做，则不能对两个div使用同一个图表对象。你能澄清一下你想做什么吗？我只想创建一个图表。我添加了一个名为“chartdiv”的div，因为我想知道错误是否真的发生在“this.chart.write（“latencyChart”）；”中。我的目标是在div中创建一个名为“latencyChart”的图表，并且没有出现错误。非常感谢！这完全解决了我的问题！当做
  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);
  },