Backbone.js 带主干的Chartjs

我正在尝试使用主干运行ChartJS（）文档的折线图示例，但我不明白为什么它不运行，下面是代码：

主干视图：

var MyChartView = Backbone.View.extend({
    template: _.template($('#myChart-template').html()),
    render: function(){
        var data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "My First dataset",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: [65, 59, 80, 81, 56, 55, 40]
                }
            ]
        };
        var options = {

            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines : true,

            //String - Colour of the grid lines
            scaleGridLineColor : "rgba(0,0,0,.05)",

            //Number - Width of the grid lines
            scaleGridLineWidth : 1,

            //Boolean - Whether the line is curved between points
            bezierCurve : true,

            //Number - Tension of the bezier curve between points
            bezierCurveTension : 0.4,

            //Boolean - Whether to show a dot for each point
            pointDot : true,

            //Number - Radius of each point dot in pixels
            pointDotRadius : 4,

            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth : 1,

            //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
            pointHitDetectionRadius : 20,

            //Boolean - Whether to show a stroke for datasets
            datasetStroke : true,

            //Number - Pixel width of dataset stroke
            datasetStrokeWidth : 2,

            //Boolean - Whether to fill the dataset with a colour
            datasetFill : true,

            //String - A legend template
            legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

        };
        var ctx = document.getElementById("myChart").getContext("2d");
        var myLineChart = new Chart(ctx).Line(data, options);

        $(this.el).html(this.template());
}

var MyChartView=Backbone.View.extend({
模板：35;.template（$（'#myChart template'）.html（）），
render:function（）{
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[65,59,80,81,56,55,40]
}
]
};
变量选项={
///布尔值-是否在图表中显示网格线
scaleShowGridLines：对，
//字符串-网格线的颜色
scaleGridLineColor:“rgba（0,0,0,05）”，
//Number—网格线的宽度
scaleGridLineWidth:1，
//布尔-点之间的直线是否弯曲
贝塞尔曲线：对，
//数字-点之间贝塞尔曲线的张力
Bezier曲线长度：0.4，
//布尔值-是否为每个点显示点
是的，
//Number-每个点的半径（以像素为单位）
点半径：4，
//数字-点-点笔划的像素宽度
pointDotStrokeWidth:1，
//数字-添加到半径的额外数量，以满足绘制点外的命中检测
PointHit检测半径：20，
//布尔值-是否显示数据集的笔划
datasetStroke：对，
//数字-数据集笔划的像素宽度
datasetStrokeWidth:2，
//布尔值-是否用颜色填充数据集
datasetFill:true，
//字符串-图例模板
legendTemplate:“
”
};
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myLineChart=新图表（ctx）.Line（数据、选项）；
$（this.el）.html（this.template（））；
}

}))

模板：

<script id="myChart-template" type="text/template">
<div>
    <canvas id="myChart" width="400" height="400"></canvas>
</div>

我收到错误消息：

---

未捕获类型错误：无法读取null的属性“getContext”，因为

文档。getElementById（“myChart”）

无法找到

画布/myChart

，因为它位于脚本标记内

试试这个

var ctx = $($('#myChart-template').html()).children('#myChart').get(0).getContext("2d");

---

希望这能解决问题。：）

作为对其他人答案和评论的补充，我得到了以下解决方案：

var MyChartView = Backbone.View.extend({
    template: _.template($('#myChart-template').html()),
    render: function(){
        $(this.el).html(this.template());

        var data = ...
        var options = ...

        var ctx = $('#myChart', this,el)[0].getContext("2d");
        var myLineChart = new Chart(ctx).Line(data, options);
}

希望这对您有所帮助。

place$（this.el）.html（this.template（））；在render方法的顶部，您没有可供图表操作的DOM