[AngularJS]添加新的 chart.js,当点击一个按钮,但得到 '不能读取属性的空的 ' getContext' '

发布时间: 2017/4/16 21:31:06
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我想添加一个新的图表,单击"添加图表"按钮时。图表一刻,不包含任何数据,但将稍后添加。无论如何,当我点击"添加图表"我得到" Cannot read property 'getContext' of null "。我认为这个问题是我的 javascript 运行在 HTML 加载完毕之前。但不是知道如何修复它...... 我试图使用 $jQuery 函数有效的方法,并将脚本添加canvas标记之后。

我的代码︰

app.js

'use strict';
require('angular');
require('angular-route');
require('angular-animate');
var chartsCtrl = require('./controllers/chartsCtrl');

var app = angular.module('DashBoard', ['ngRoute', 'ngAnimate'])

//Load controller
app.controller('chartsCtrl', ['$scope', chartsCtrl]);

chartsCtrl.js:

module.exports = function($scope) { 
var Chart = require('chart.js');

    $scope.charts = [];
    var chartId = 0;
    $scope.addChart = function() {
       chartId ++;
       $scope.charts.push({msg: 'Chart added!!', id: chartId});
       new Chart(document.getElementById(chartId).getContext('2d')).Line();
};

    $scope.closeChart = function(index) {
       $scope.charts.splice(index, 1);
    }; 
};

charts.html:

<div ng-controller='chartsCtrl'>  
    <div class="row">
        <div class="col-md-3" ng-repeat="chart in charts">
            <div class="panel panel-default">
                <div class="panel-body">
                    {{chart.msg}} {{chart.id}} <i class="fa fa-times" ng-click="closeChart($index)"></i>
                    <canvas id={{chart.id}} width="400" height="200"> </canvas>
                </div>
            </div>
        </div> 
    </div>
</div>

解决方法 1:

你想要获取的元素视图完成渲染之前,注入 $timeout 到您的控制器和 DOM 操作的一部分,请确保元素已经在文档中的换行,这应该工作︰

module.exports = function($scope, $timeout) { 
    var Chart = require('chart.js');

    $scope.charts = [];
    var chartId = 0;

    function initChart( chartIt ) {
        $timeout(function() {
           new Chart(document.getElementById(chartId.toString()).getContext('2d')).Line();
        });
    }

    $scope.addChart = function() {
       chartId ++;
       $scope.charts.push({msg: 'Chart added!!', id: chartId});
       initChart( chartId );
    };

    $scope.closeChart = function(index) {
        $scope.charts.splice(index, 1);
    }; 
};
官方微信
官方QQ群
31647020