数据可视化清新版【chart.js】学习笔记6.0—饼图(Pie)_chart.js 饼状图

作者：繁依Fanyi0 | 2024-02-23 01:00:04

踩

chart.js 饼状图

Pie——（饼图）

饼图和环形图表可能是最常用的图表。它们被分成不同的部分，每个部分的圆弧表示每个数据的比例值。该图表在展示数据之间的关系比例方面非常出色。饼图和环形图在 Chart.js 中实际上是同一个类，但有一个不同的默认值 - cutoutPercentage。意味着内部的百分比被减少。饼图默认为 0，环形图默认为 50。该图表在Chart核心中注册了两个别名。除了不同的默认值和不同的别名，其他是完全一样的。这里主要讲的是饼图。
官方文档：https://www.chartjs.org/docs/latest/charts/doughnut.html

用法示例
var myPieChart = new Chart(ctx, {
type: ‘pie’,
data: data,
options: options
});

图表属性（博主这边只列举看出了比较常用和设置影响明显的属性）

属性	描述	类型	默认值
label	图例和提示中显示的标签名	String	‘’
backgroundColor	弧背景色。	Color	‘rgba(0, 0, 0, 0.1)’
borderColor	弧形边框颜色。	Color	‘rgba(0, 0, 0, 0.1)’
borderWidth	弧形边框宽度（以像素为单位）。	number	2
borderAlign	边界对齐	String	‘center’
hoverBackgroundColor	悬停时的弧形背景颜色。	Color	undefined
hoverBorderColor	悬停时的弧形边框颜色。	Color	undefined
hoverBorderWidth	悬停时的弧形边框宽度（以像素为单位）。	number	undefined
cutoutPercentage	从中间切出的图表百分比。	number	0
rotation	从中绘制弧的起始角度。	number	-0.5 * Math.PI
circumference	扫一扫，使电弧覆盖。	number	2 * Math.PI
animation.animateRotate	是否。使用旋转动画进行动画。	boolean	true
animation.animateScale	使图表从中心向外缩放。	boolean	false

相关属性详解

cutoutPercentage 从中间切出的图表的百分比。饼图默认0，如果设为50就变成了环形图。

let ctx = document.getElementById("myChart5");
let myChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
             	cutoutPercentage:0,//默认为零
             }
});
1
2
3
4
5
6
7
8

在这里插入图片描述

let ctx = document.getElementById("myChart5");
let myChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
             	cutoutPercentage:50,
             }
});
1
2
3
4
5
6
7
8

在这里插入图片描述

rotation 从中绘制弧的起始角度。

let ctx = document.getElementById("myChart5");
let myChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
                 rotation:-0.5 * Math.PI,//默认值
             }
});
1
2
3
4
5
6
7
8

在这里插入图片描述

let ctx = document.getElementById("myChart5");
let myChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
                 rotation:2 * Math.PI,//默认值
             }
});
1
2
3
4
5
6
7
8

在这里插入图片描述

circumference 图表占用面积，满图表是2 * Math.PI，一半是1* Math.PI，其他以此类推。

let ctx = document.getElementById("myChart5");
let myChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
                  circumference:1*Math.PI,
             }
});
1
2
3
4
5
6
7
8

在这里插入图片描述

let ctx = document.getElementById("myChart5");
let myChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
                  circumference:2*Math.PI,//默认值
             }
});
1
2
3
4
5
6
7
8

在这里插入图片描述

数据可视化清新版【chart.js】学习笔记

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/132529