chart.js 最新版 (曲线图) 创建例子

说明：由于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>