添加新图表.js单击按钮时，但得到“无法读取空的属性'getContext'”

Add new chart.js when clicking a button, but get 'Cannot read property 'getContext' of null'

本文关键字：读取 属性 getContext 按钮 单击 js 新图表 添加      更新时间：2023-09-26

我喜欢在单击"添加图表"按钮时添加新图表。该图表目前不包含任何数据，但稍后将添加。无论如何，当我单击"添加图表"时，我得到" Cannot read property 'getContext' of null "。我认为问题是我的javascript在HTML完成加载之前正在运行。但不知道如何解决它。 我尝试使用$jQuery.ready函数，并在画布标签之后添加脚本。

我的代码：

应用.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]);

图表按.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);
    }; 
};

图表.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>

您尝试在视图完成渲染之前获取元素，将$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);
    }; 
};
相关文章：