chart.js之行2686错误(Chart.js line 2686 Error)

2019-10-20 22:06发布

我想chart.js之的线型图在我屈应用。 但Firefox控制台说:

`TypeError:this.scale is undefined(Chart.js:2686)`

并且,线型图不displayed.I写了下面的代码。

@ hello.erb

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
        <script src="Chartjs/Chart.js" type="text/javascript"></script>
        <script src="script.js" type="text/javascript"></script>
    </head>
    <body>
        <canvas id="line" height="450" width="600"></canvas>
    </body>
</html>

@的script.js

$(function(){
    var lineChartData = {
    labels : ["hoge","fuga"],
    datasets : [
    {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        data : [60,70]
    } ]
}

var myLine = new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
});

当我写的不是西纳特拉(ERB)的代码,它工作正常。 我应该怎么做修改?

Answer 1:

检查你的浏览器(通常,按F12)的开发工具和看到网络选项卡,如果正确加载文件 - 按F5键刷新页面。 这可能是你的脚本文件没有加载,在这种情况下,在前面加上一个斜杠( <script src='/script.js' ...> 位于你的JavaScript文件public目录?



Answer 2:

您的问题,看起来像一个时间问题。 因为你的画布元素不存在时,你的脚本运行。

使用jQuery你可以换你的图表声明中的document.ready

$( document ).ready(function() {
     var myLine = new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
}

对于非Jquery的解决办法,我建议https://stackoverflow.com/a/9899701/1279355



文章来源: Chart.js line 2686 Error