chart.js轻量级图表插件使用

Posted 2022-03-29 huang99882008

安装下载

下载地址：https://github.com/chartjs/Chart.js/releases/latest

cdn LINK：https://cdnjs.com/libraries/Chart.js

文档：http://chartjs.cn/docs/

Chart.js有两种不同的版本。常规版本的Chart.js和 Chart.min.js，附带chart.js库的同时还带着颜色解析器。如果你想使用这个版本并且在你的图表中使用时间轴，你需要在安装Chart.js之前安装上Moment.js。

而另一个版本Chart.bundle.js 和Chart.bundle.min.js早就包含了Moment.js 。你唯一需要注意的就是两个版本只能安装一个，否则会引起错误。

一旦你决定好使用哪个版本之后，你就可以在你的项目中引入Chart.js了

<script src="path/to/Chart.min.js"></script>
<script>
    var barChart = new Chart(...)
</script>

使用方法

1创建html标签

<canvas id="barChart" width="600" height="400"></canvas>

注：一般来说，画布的宽度和高度决定了图表的尺寸。但在创建响应式图表时，宽高的数值决定的只是比例。

2创建一个chart类的实例

var barChart = new Chart($("barChart"), 
  type: ‘bar‘,
  data: 
    labels: ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],
    datasets: [
      label: ‘Population‘,
      data: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398],
      backgroundColor: [
        ‘rgba(255, 99, 132, 0.6)‘,
        ‘rgba(54, 162, 235, 0.6)‘,
        ‘rgba(255, 206, 86, 0.6)‘,
        ‘rgba(75, 192, 192, 0.6)‘,
        ‘rgba(153, 102, 255, 0.6)‘,
        ‘rgba(255, 159, 64, 0.6)‘,
        ‘rgba(255, 99, 132, 0.6)‘,
        ‘rgba(54, 162, 235, 0.6)‘,
        ‘rgba(255, 206, 86, 0.6)‘,
        ‘rgba(75, 192, 192, 0.6)‘,
        ‘rgba(153, 102, 255, 0.6)‘
      ]
    ]
  
);

//参数详解
第一个位置参数：为之前创建的HTML节点对象，可以用DOM或Jquery获取。
第二个位置参数：是一个Json格式的数据字典，里面内容包括以下
type    　　　　　　　　　　   图表类型，可选如下值line（）, bar（柱状图）, radar, polarArea, pie（饼形图）, doughnut 以及bubble
data

backgroundColor    　　　　　 区域颜色，与数据对象，可以使用rgba颜色对象，也可以使用rgb字符串如[‘#debd5a,]