图表js未显示 [英] Charts js not showing
本文介绍了图表js未显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用Charts.js创建简单的折线图.当我运行下面的代码时，没有图表出现.我究竟做错了什么?我正在按照本教程 http://www.chartjs.org/docs/latest/getting-started/
I am trying to use the charts.js to create a simple line graph. When I run the code below no chart appears. What am I doing wrong? I am following this tutorial http://www.chartjs.org/docs/latest/getting-started/
<html>
<head>
<meta charset="utf-8"/>
<title>Chart.js demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Chart.js Sample</h1>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
},
// Configuration options go here
options: {}
});
</script>
</body>
</html>
推荐答案
您正在使用版本 0.2.0 .如果您在演示中使用版本( 2.4.0 )或最新版本( 2.6.0 )，效果很好.该CDN链接为 https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js
You're using version 0.2.0. Works fine if you use the version in the demo (2.4.0) or the newest version (2.6.0). The CDN link for that is https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js
<html>
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>
<h1>Chart.js Sample</h1>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgb(255, 99, 132)",
borderColor: "rgb(255, 99, 132)",
data: [0, 10, 5, 2, 20, 30, 45]
}
]
},
// Configuration options go here
options: {
responsive:false,
maintainAspectRatio: false
}
});
</script>
</body>
</html>这篇关于图表js未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
