javascript 使用 Chart.js 显示图表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20380611/
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
Displaying a chart using Chart.js
提问by Abdul Jabbar
I'm pretty new to JavaScript and HTML5. I'm trying to print a normal line chart onto canvas using Chart.js. I followed the step by step guide on their website, but am unable to make the graph show.
我对 JavaScript 和 HTML5 很陌生。我正在尝试使用 Chart.js 将普通折线图打印到画布上。我按照他们网站上的分步指南进行了操作，但无法显示图表。
This is the current code:
这是当前的代码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CHARTS</title>
<script src="../../../Downloads/Chart.js-master/Chart.js"></script>
</head>
<body>
<canvas id="myCanvas" width="800" height="500" style="border:dashed #FF0000">Aw Snap!</canvas>
<script>
context = document.getElementById('myCanvas').getContext('2d');
var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
Line.defaults = {
//Boolean - If we show the scale above the chart data
scaleOverlay : false,
//Boolean - If we want to override with a hard coded scale
scaleOverride : false,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps : null,
//Number - The value jump in the hard coded scale
scaleStepWidth : null,
//Number - The scale starting value
scaleStartValue : null,
//String - Colour of the scale line
scaleLineColor : "rgba(0,0,0,.1)",
//Number - Pixel width of the scale line
scaleLineWidth : 1,
//Boolean - Whether to show labels on the scale
scaleShowLabels : true,
//Interpolated JS string - can access value
scaleLabel : "<%=value%>",
//String - Scale label font declaration for the scale label
scaleFontFamily : "'Arial'",
//Number - Scale label font size in pixels
scaleFontSize : 12,
//String - Scale label font weight style
scaleFontStyle : "normal",
//String - Scale label font colour
scaleFontColor : "#666",
///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,
//Boolean - Whether to show a dot for each point
pointDot : true,
//Number - Radius of each point dot in pixels
pointDotRadius : 3,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth : 1,
//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,
//Boolean - Whether to animate the chart
animation : true,
//Number - Number of animation steps
animationSteps : 60,
//String - Animation easing effect
animationEasing : "easeOutQuart",
//Function - Fires when the animation is complete
onAnimationComplete : null
}
new Chart(context).Line(data,options);
</script>
</body>
What am I doing wrong that is causing my chart to not show?
我做错了什么导致我的图表不显示？
回答by Lauris
Data variable is not yet initialized when you are calling "new Chart". Move the "new Chart" to end of JS block.
当您调用“新图表”时，数据变量尚未初始化。将“新图表”移动到 JS 块的末尾。
A tip - to check for errors use JS console.
提示 - 使用 JS 控制台检查错误。
Edit: The were two additional JavaScript errors - options variable was not intialized and Line was undefined variable. Please check my reply below for demo link.
编辑：这是两个额外的 JavaScript 错误 - 选项变量未初始化，行是未定义的变量。请在下面查看我的回复以获取演示链接。
回答by henriqb
You didn't declared the options variable either pass an empty array for options.
您没有声明 options 变量，也没有为选项传递一个空数组。
new Chart(context).Line(data,{});
Or declare the variable
或者声明变量
var options = { ... }
new Chart(context).Line(data, options);
回答by Radix Salvilines
I think I have a solution to 'options' problem. If you remove options from:
我想我有一个“选项”问题的解决方案。如果您从以下位置删除选项：
new Chart(context).Line(data,options);
so it looks like that:
所以它看起来像这样：
new Chart(context).Line(data);
does it work?
它有效吗？
It is because
这是因为
Line.defaults = { ... }
is just a list of options you may change - you are not supposed to put the whole thing to your html file.
只是您可以更改的选项列表 - 您不应该将整个内容放入您的 html 文件中。
In other words instead of for example:
换句话说，而不是例如：
Line.defaults = { scaleOverlay : true, scaleOverride : true }
try:
尝试：
var options = { scaleOverlay : true, scaleOverride : true }
The tutorial on the homepage of chartjs is confusing in this regard a little bit because it tells you to use an array of settings that are default in the main file. But you are supposed to just take the "insides" and use them, not the whole thing and it does not say to actually create options variable for it. It took me an hour to figure out but only because I have made a mistake of not checking up JS Console immediatelly, as @Lauris hinted out in his answer :)
chartjs 主页上的教程在这方面有点令人困惑，因为它告诉您使用主文件中的默认设置数组。但是您应该只使用“内部”并使用它们，而不是全部，并且它并没有说实际为其创建选项变量。我花了一个小时才弄明白，但这只是因为我犯了一个错误，没有立即检查 JS 控制台，正如@Lauris 在他的回答中所暗示的那样:)
Also make sure that this:
还要确保：
<script src="../../../Downloads/Chart.js-master/Chart.js"></script>
points to a correct file. It looks like you just did that to hide the real path from StackOverflow community. In that case nevermind.
指向正确的文件。看起来您这样做是为了向 StackOverflow 社区隐藏真实路径。在那种情况下，没关系。
I hope this helps!
我希望这有帮助！
