<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script src="JS/Chart.min.js"></script>
</head>
<body>
<div>
<canvas id="canvas"></canvas>
</div> <script>
var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
var lineChartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}
]
} window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}
</script>
</body>
</html>
注意：数据源labels和data是数组，不能拼接成一个字符串放进去，没效果。
Chart有六种样式可供选择，效果挺好的。此外，还可以考虑用HighCharts和ECharts实现图表展示。