Question

我正在使用Symfony 2和Twig Template。在Twig中，我想用Chart.js绘制两个图表。

所以我添加了以下js：

{% block javascripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
{% endblock %}

为了区分这些图表，我在循环中传递一个更改变量抛出一个函数：

{{ groupedDimension[0][0].dimension }}等于gaoperatingSystem（在第一个循环中）和gascreenResolution（在第二个循环中）

{% for groupedDimension in groupedResults %}
    <script>
        var jQueryId = jQuery('#{{ groupedDimension[0][0].dimension }}').attr('id');
        drawChart(jQueryId);
    </script>
{% endfor %}

创建图表的功能：

<script>
function drawChart(id) {
    var lineChartData = {
        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]
            }
        ]
    }

    console.log(id);  //proves gaoperatingSystem and gascreenResolution
    window.onload = function(){
        var ctx = document.getElementById(id).getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive: true
        });
    }
}
</script>

错误显示在第var ctx = document.getElementById(id).getContext("2d");行

在html我有两个图表的divs：

{% for groupedDimension in groupedResults %}
    <div style="width:80%">
        <div>
            <canvas id="{{ groupedDimension[0][0].dimension }}" height="450" width="600"></canvas>
        </div>
     </div>
{% endfor %}

浏览器控制台显示以下错误消息：

TypeError：document.getElementById（...）。getContext不是函数

导致错误的原因是什么？如何解决？

Answer 1

这部分：

window.onload = ...

...替换附加到onload的所有先前window个事件处理程序。由于您已经在使用jQuery，因此无需手动执行此操作，只需：

jQuery(function($){
   // Do stuff
});

......像往常一样。

ChartJS TypeError：document.getElementById（...）。getContext不是函数

1 个答案: