Question

我使用Amcharts来显示图表，然后在Bootstrap组件中为它创建一个div。其次是我的html＆amp; 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（＆＃34; latencyChart＆＃34;）。错误是无法读取属性＆＃39; call＆＃39;未定义的。然后我在这个页面中创建了一个名为＆＃34; chartdiv＆＃34;的新div。要知道程序是否仍然可以工作，我添加了this.chart.write（＆＃34; chartdiv＆＃34;）;原来之后。我发现＆＃34; chartdiv＆＃34;中没有图表。并且错误继续。

Answer 1

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

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

这里有fiddle这个修复程序。

或者，你可以使用dataUpdated event's argument object以这种方式访问图表对象，而不是摆弄这个/那个/ etc，例如：

  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

显示的是Amcharts，但控制台输出一个错误

1 个答案: