饼图/环形图能够展示数据集中各项的大小与各项总和的比例。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
});
设置多个数据集的话,每个数据集对应的饼图/环形图会叠加在一起,其代码及效果如下图所示(多个数据集比较麻烦的是给每类数据选个不同的颜色)。
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'
]
}]
常用属性
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