chart.js使用学习——饼图/环形图_js chart.js绘制饼图

  饼图/环形图能够展示数据集中各项的大小与各项总和的比例。chart.js中创建饼图/环形图，只需在chart构造函数中指定图表类型为pie/doughnut即可。

基本用法

  创建饼图/环形图主要是在Chart类构造函数中指定type为pie/doughnut即可。从图形效果来看，饼图/环形图更适合展示不同类型数据在总量中所占的比例，突出重点类型数据的占比。例如分析人员组成、收入构成等等。
  单个数据集对应的饼图/环形图代码及效果如下图所示：

	const labels = months({count: 7});
        const data = {
        labels: labels,
        datasets: [{         
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: [
            '#ffff00',
            '#ffcc33',
            '#ff9966',
            '#ff6699',
            '#ff33cc',
            '#ff00ff',
            '#cccc00'
            ]
        }]
        };
        
        var barChart = new Chart(ctx, {
            type: 'pie',//环形图type为doughnut
            data: data
            });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

  设置多个数据集的话，每个数据集对应的饼图/环形图会叠加在一起，其代码及效果如下图所示（多个数据集比较麻烦的是给每类数据选个不同的颜色)。

	const data = {
        labels: labels,
        datasets: [{         
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: [
            '#ffff00',
            '#ffcc33',
            '#ff9966',
            '#ff6699',
            '#ff33cc',
            '#ff00ff',
            '#cccc00'
            ]
        },
        {
            data: [85, 79, 100, 101, 76, 75, 60],
            borderColor: 'rgb(175, 92, 92)',
            backgroundColor: [
            '#99ff00',
            '#99cc33',
            '#999966',
            '#996699',
            '#9933cc',
            '#9900ff',
            '#66cc00'
            ]
            
        },        
        {
            data: [185, 179, 200, 201, 176, 175, 160],
            borderColor: 'rgb(125, 42, 192)',
            backgroundColor: [
            '#DDA0DD',
            '#DB7093',
            '#D8BFD8',
            '#D2B48C',
            '#D15FEE',
            '#CDCDB4',
            '#CAE1FF'
            ]
        }]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

常用属性

  borderAlign：设置扇区之间边框线的对其方式，可选值为inner和center|，默认值为center。

  borderRadius：设置扇区的圆角半径，可以一起设置，也可以单独设置，详见参考文献2 ，默认值为0 。

  hoverOffset：设置鼠标悬停时的偏移，效果见下面的动图，默认值为0。

  offset设置正常显示时扇区之间的偏移，spacing设置扇区之间的空白距离，这两者的区别如下图所示。

参考文献：
[1]https://baike.baidu.com/item/%E9%A5%BC%E5%9B%BE/10816566?fr=aladdin
[2]https://www.chartjs.org/docs/latest/charts/doughnut.html#doughnut
[3]https://chartjs.bootcss.com/docs/charts/doughnut.html