javascript - 显示 Amcharts，但控制台输出一个错误

Question

我使用 Amcharts 来显示图表，并在 Bootstrap 组件中为其制作了一个 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: 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”)。错误是无法读取未定义的属性“调用”。然后我在这个页面中创建了一个名为“chartdiv”的新div来了解程序是否仍然可以工作，并且我添加了 this.chart.write("chartdiv");在原来的之后。我发现“chartdiv”中没有图表并且错误继续存在。

Answer 1

问题是您如何将 zoomChart 方法分配给 dataUpdated 事件 - that.zoomChart() 正在调用 ZoomChart 方法，而不是将其分配给事件。您需要创建一个调用 ZoomChart 的函数，以便它可以在事件期间访问对象的图表属性，即

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

这是一个fiddle通过此修复。

或者，您可以使用 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