Question

获取错误：未捕获TypeError：无法读取属性＆＃39; getContext＆＃39;未定义的

var $ = jQuery = require('jquery'),
    Handlebars = require('handlebars'),
    Backbone = require('backbone'),
    _ = require('underscore'),
    piechartTemplate = require('../../templates/dashboard/piechart.html'),
   services = require('../../libs/services'),
   Chart = require('chart.js/Chart');

var PieChartView = Backbone.View.extend({
    el: "#id-canvas",
    initialize: function() {
        this.$el.html(piechartTemplate);
        this.render();
    },
    render: function() {
        var self = this;
        // this.ctx = this.$el.get(0).getContext("2d");
        var canvas = this.$el.get(0);
        console.log(canvas);
        this.ctx = canvas.getContext("2d");
        console.log(this.ctx);

        this.chart = new Chart(self.ctx);
        var data = this.chartData();
        self.chart.Doughnut(data, {
            animateScale: true
        });
    },
    chartData: function() {
        var data = [{
            value: 300,
            color: "#F7464A",
            highlight: "#FF5A5E",
            label: "Red"
        }, {
            value: 50,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Green"
        }, {
            value: 100,
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Yellow"
        }]
        return data;
    }
});

module.exports = PieChartView;

HTML：

<canvas id="id-canvas" height="500" width="600"></canvas>

Answer 1

您需要在<head>标记之前从<body>标记移动主JS文件或使用jQuery DOM ready包装器（但我个人更喜欢在body之前放置脚本）

$(function() {
   ...
});

如何访问Backbone中的canvas元素

1 个答案: