说明:由于chart.js 的版本更新,按照第一版的关键字设置图表的颜色等关键字,已经不会生效,所以记录一下第二版chart曲线图表的创建。
<div>
<canvas id="canvas" width="400" height="450"></canvas>
</div>
<script src="/Chart.min.js"></script>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line', // line 表示是 曲线图,当然也可以设置其他的图表类型 如柱形图 : bar 或者其他
data: {
labels : ["January","February","March","April","May","June","July"], //按时间段 可以按星期,按月,按年
datasets : [
{
label: "123", //当前数据的说明
fill: true, //是否要显示数据部分阴影面积块 false:不显示
borderColor: "rgba(200,187,205,1)",//数据曲线颜色
pointBackgroundColor: "#fff", //数据点的颜色
data: [80, 90, 100, 30, 67, 59, 88], //填充的数据
},
{
label: "456", //当前数据的说明
fill: true, //是否要显示数据部分阴影面积块 false:不显示
borderColor: "rgba(75,192,192,1)",//数据曲线颜色
pointBackgroundColor: "#fff", //数据点的颜色
data: [21, 34, 35, 50, 45, 21, 70], //填充的数据
}
]
}
});
</script>