<!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实现图表展示。