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

来源：互联网发布：axure iphone组件 mac 编辑：程序博客网时间：2024/04/29 15:59

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

阅读全文

0 0