引入Chart.js文件后,仍然无法输出数据表是怎么回事?
是我这个写法有问题吗?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/js/Chart.js"></script>
<script>
var ctx = document.getElementById("myChart").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]
}
]
}
var myNewChart = new Chart(ctx).Line(data);
</script>
<title></title>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>
</html>
greatt
9 years, 2 months ago
Answers
你把你的js代码移动到body的最下面试试,手机打字不方便。
我在JSBin上试了一下可以,
http://jsbin.com/dezajekiqu/edit?html,output
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").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]
}
]
};
var myNewChart = new Chart(ctx).Line(data);
</script>
</body>
</html>
发现你的原因了,js引入的路径不对,应该是
./js/Chart.js
吧
双面维诺妮卡
answered 9 years, 2 months ago