Chartjs与Backbone

Question

我试图使用骨干网运行ChartJS（http://www.chartjs.org/docs/#line-chart）文档的折线图示例，但我无法确定它为什么不运行，这里是代码：

骨干视图：

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());
}

}）;

模板：

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

我收到错误消息：

未捕获的TypeError：无法读取属性＆＃39; getContext＆＃39;为null

Answer 1

补充其他人的答案和评论，我得到了这个解决方案：

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);
}

希望这对你有所帮助。

Answer 2

自document.getElementById("myChart")以来，无法找到脚本标记内的canvas/myChart。

试试这个，

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

希望这能解决问题。 ：）