Chartjs 与主干答案

【问题标题】：Chartjs with BackboneChartjs 与主干
【发布时间】：2014-08-12 04:52:52
【问题描述】：

我正在尝试使用主干运行 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>

我收到错误消息：

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

【问题讨论】：

放置 $(this.el).html(this.template());在 render 方法的顶部，你没有 DOM 来操作图表

标签： backbone.js chart.js

【解决方案1】：

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

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

希望对您有所帮助。

【讨论】：

【解决方案2】：

由于document.getElementById("myChart")，无法在脚本标签中找到canvas/myChart。

试试这个，

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

希望这能解决问题。 :)

【讨论】：