Pie——(饼图)
饼图和环形图表可能是最常用的图表。它们被分成不同的部分,每个部分的圆弧表示每个数据的比例值。该图表在展示数据之间的关系比例方面非常出色。饼图和环形图在 Chart.js 中实际上是同一个类,但有一个不同的默认值 - cutoutPercentage。意味着内部的百分比被减少。饼图默认为 0,环形图默认为 50。该图表在Chart核心中注册了两个别名。除了不同的默认值和不同的别名,其他是完全一样的。这里主要讲的是饼图。
用法示例
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,//默认为零
}
});
let ctx = document.getElementById("myChart5");
let myChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
cutoutPercentage:50,
}
});
rotation 从中绘制弧的起始角度。
let ctx = document.getElementById("myChart5");
let myChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
rotation:-0.5 * Math.PI,//默认值
}
});
let ctx = document.getElementById("myChart5");
let myChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
rotation:2 * Math.PI,//默认值
}
});
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,
}
});
let ctx = document.getElementById("myChart5");
let myChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
circumference:2*Math.PI,//默认值
}
});