Javascript ReferenceError：未定义图表 - chartjs
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29785623/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReferenceError: Chart is not defined - chartjs
提问by iWantToLearn
Is there a bug with Chart.js? Every time I add any of the graphs at Chart.js to my website I get an error, but when I used the graph as stand-alone program it runs smoothly without errors. I am using HTML5.
Chart.js 有错误吗？每次我将 Chart.js 中的任何图表添加到我的网站时，我都会收到一个错误，但是当我将该图表用作独立程序时，它可以顺利运行而没有错误。我正在使用 HTML5。
<html>
<head>
<meta charset="utf-8" />
<title>Rice Consumption</title>
<script src='Chart.min.js'></script>
</head>
<body>
<canvas id="rice" width="600" height="400"></canvas>
<script>
var riceData = {
labels : ["January","February","March","April","May","June"],
datasets :
[
{
fillColor : "rgba(172,194,132,0.4)",
strokeColor : "#ACC26D",
pointColor : "#fff",
pointStrokeColor : "#9DB86D",
data : [203000,15600,99000,25100,30500,24700]
}
]
}
var rice = document.getElementById('rice').getContext('2d');
new Chart(rice).Line(riceData);
</script>
</body>
</html>
SOLVED: I just decoupled the script from the canvas element (made another file for the script to execute its function).
已解决：我只是将脚本与画布元素分离（为脚本制作了另一个文件以执行其功能）。
Updated HTML:
更新的 HTML：
<html>
<head>
<meta charset="utf-8" />
<title>Rice Consumption</title>
<script src='Chart.min.js'></script>
</head>
<body>
<canvas id="rice" width="600" height="400"></canvas>
<script src='Chart.min.js'></script>
<script src='rice.js'></script>
</body>
</html>
New JavaScript file:
新的 JavaScript 文件：
var riceData = {
labels : ["January","February","March","April","May","June"],
datasets : [
{
fillColor : "rgba(172,194,132,0.4)",
strokeColor : "#ACC26D",
pointColor : "#fff",
pointStrokeColor : "#9DB86D",
data : [203000,15600,99000,25100,30500,24700]
}
]
}
var rice = document.getElementById('rice').getContext('2d');
new Chart(rice).Line(riceData);
采纳答案by SamiX
here is a workding jsfiddle of your code: new Chart(rice).Line(riceData);
http://jsfiddle.net/mahmalsami/jqcthmyo/
So the problem is definitively coming from your external Chart.min.js inclusion
You may find a 404 on your js get. Please make sure you're linking to the correct js folder. (try accessing your localhost/Chart.min.js to see if you can access to your file)
这是您的代码的有效 jsfiddle：new Chart(rice).Line(riceData);
http: //jsfiddle.net/mahmalsami/jqcthmyo/
所以问题肯定来自您的外部 Chart.min.js 包含
您可能会在您的 js get 上找到 404。请确保您链接到正确的 js 文件夹。（尝试访问您的 localhost/Chart.min.js 以查看您是否可以访问您的文件）
回答by Rahul Varadkar
I was also getting same error. To fix this I moved the chart script into separate graph.js file.
我也遇到了同样的错误。为了解决这个问题，我将图表脚本移到了单独的 graph.js 文件中。
Still I was getting same error. Which is fixed later when I put tag in following order before end of tag as shown below.
我仍然遇到同样的错误。当我在标签结束之前按以下顺序放置标签时，稍后会修复，如下所示。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script type="text/javascript" src="jscript/graph.js"></script>
</body>
The page look like this:
页面如下所示：
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<!DOCTYPE html>
<canvas id="myChart"></canvas>回答by Sidi M. Aourid
I got the same error. To solve the problem, you have to include the chart.js library correctly as follows:
我得到了同样的错误。要解决该问题，您必须正确包含 chart.js 库，如下所示：
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
回答by ???
1) I tried Chart.jsdownloaded from Chartjs.org.
But, it's not working.
1）我尝试Chart.js从Chartjs.org. 但是，它不起作用。
2) Try to this.
2）试试这个。
<script type="text/javascript" src="http://www.chartjs.org/assets/Chart.js">
</script>
Working good.
工作良好。
回答by legoblocks
If you're seeing this intermittently on Ruby on Rails 5, like I was, the issue was to do with Turbolinks, which I disabled. Works great now!
如果您像我一样在 Ruby on Rails 5 上间歇性地看到这种情况，那么问题与我禁用的 Turbolinks 有关。现在效果很好！
回答by chuckrutis
Change <script src='Chart.min.js'></script>to <script src='chart.min.js'>and change the name of Chart.min.js on your folder to chart.min.js
更改<script src='Chart.min.js'></script>到<script src='chart.min.js'>，改变你的文件夹chart.min.js上Chart.min.js名
