Chart.js使用（一）

最新推荐文章于 2024-07-20 15:54:15 发布

waltzlhy

最新推荐文章于 2024-07-20 15:54:15 发布

阅读量4.7k

点赞数

文章标签： chart.js

本文链接：https://blog.csdn.net/waltzlhy/article/details/78801132

版权

——chart.js的引入及对象创建

最近在使用Chart.js做一些报表数据展示，最早看的是Chart.js对应的中文文档，不过发现在调试过程中有各种报错。仔细看了一下，发现中文文档对应的版本内容可能和现在使用的版本不一致导致的。这里记录一下使用时的一些内容，防止下次使用的时候忘记了。

目前使用Chart.js还停留在比较简单的层面，先记录下初始化对象部分。
中文文档中，针对对象初始化部分的示例为：

var ctx =document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);

在使用Chart.js V2.7.1版本时，需做以下调整：

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx,dataset,options);

其中，dataset包含以下内容：

var dataset = {
    type:'';     //图表类型；[]
    data:{
        labels:['标签1','标签2'],//数据横坐标
        dataset:[{
            label:'',
            data:['数据1','数据2'],//数据值
            backgroundColor:[],//各类型数据展示颜色
            borderColor:[],
            borderWidth:1,
        }]
    }