我想用Chart.js绘制折线图,我按照Chart.js的“入门”部分进行操作,但我仍然无法绘制示例图表.我的代码出了什么问题？据NetBeans说,一切都好……
这是代码：
<!doctype html>
<html lang="nl">
<head>
<Meta charset="utf-8">
<title>Become a member</title>
<script type="text/javascript" src="Chart.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onLoad = function() {
init();
};
function init() {
var ctx = $("#myChart").get(0).getContext("2d");
var myNewChart = new Chart(ctx).Line(data,options);
var data = {
labels: ["January","February","March","April","May","June","July"],datasets: [
{
fillColor: "rgba(220,220,0.5)",strokeColor: "rgba(220,1)",pointColor: "rgba(220,pointStrokeColor: "#fff",data: [65,59,90,81,56,55,40]
},{
fillColor: "rgba(151,187,205,strokeColor: "rgba(151,pointColor: "rgba(151,data: [28,48,40,19,96,27,100]
}
]
}
}
</script>
<div>
<section>
<article>
<canvas id="myChart" width="400" height="400">
</canvas>
</article>
</section>
</div>
</body>
</html>
任何帮助都非常欢迎！
链接到插件 – > http://www.chartjs.org/docs/
亲切的问候
格伦
解决方法
你需要放置这一行：
var myNewChart = new Chart(ctx).Line(data,options);
在你的宣言之下.此外,您没有定义选项,因此您还需要从通话中删除它.
完成后,它应该看起来像：
<!doctype html>
<html lang="nl">
<head>
<Meta charset="utf-8">
<title>Become a member</title>
<script type="text/javascript" src="Chart.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
init();
};
function init() {
var ctx = $("#myChart").get(0).getContext("2d");
var data = {
labels: ["January",datasets: [
{
fillColor: "rgba(220,40]
},{
fillColor: "rgba(151,100]
}
]
}
var myNewChart = new Chart(ctx).Line(data);
}
</script>
<div>
<section>
<article>
<canvas id="myChart" width="400" height="400">
</canvas>
</article>
</section>
</div>
</body>
</html>
