Chart-圆形和中空圆图

甜甜圈和派

因为甜甜圈的形状和中空型圆图一样,所有之后都叫它甜甜圈。 馅饼和甜甜圈图表可能是最常用的图表。它们被分成不同的部分,每个部分的圆弧显示每个数据的比例值。 他们非常擅长展示数据之间的关系比例。 饼图和圆环图在Chart.js中实际上是同一个类,但有一个不同的默认值 - 它们的值cutoutPercentage。这等于内部的百分比应该被削减。这默认0为饼图和50甜甜圈。 它们也在Chart核心的两个别名下注册。除了不同的默认值和不同的别名,它们完全相同。

使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// For a pie chart
var myPieChart = new Chart(ctx,{
type: 'pie',
data: data,
options: options
});


// And for a doughnut chart
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: options
});

数据集属性

圆环/饼图允许为每个数据集指定许多属性。这些用于设置特定数据集的显示属性。例如,数据集的弧的颜色通常以这种方式设置。

名称

类型

描述

backgroundColor

Color[]

borderColor

Color[]

borderWidth

Number[]

数据集中弧的边界宽度。

hoverBackgroundColor

Color[]

徘徊时弧线的填充颜色。

hoverBorderColor

Color[]

徘徊时弧线的笔触颜色。

hoverBorderWidth

Number[]

徘徊时弧线的笔画宽度。

配置选项

这些是Pie&Donut图表特有的自定义选项。这些选项与全局图表配置选项合并,并形成图表的选项。

名称

类型

默认

描述

cutoutPercentage

Number

50- 为了甜甜圈,0- 为了派

从中间切出的图表的百分比。

rotation

Number

-0.5 * Math.PI

起始角度从中绘制弧线。

circumference

Number

2 * Math.PI

扫描以允许弧线覆盖

animation.animateRotate

Boolean

true

如果为true,则图表将使用旋转动画制作动画。该属性位于options.animation对象中。

animation.animateScale

Boolean

false

如果为true,则将动画从中心向外缩放图表。

默认选项

我们还可以为创建的每个甜甜圈类型更改这些默认值,该对象可在Chart.defaults.doughnut。饼图也有可用于更改的这些默认值的克隆,Chart.defaults.pie唯一的区别cutoutPercentage是设置为0。

数据结构

对于饼图,数据集需要包含一组数据点。数据点应该是一个数字,Chart.js将总计所有数字并计算每个数字的相对比例。 您还需要指定一组标签,以便正确显示工具提示

1
2
3
4
5
6
7
8
9
10
11
12
data = {
datasets: [{
data: [10, 20, 30]
}],

// These labels appear in the legend and in the tooltips when hovering different arcs
labels: [
'Red',
'Yellow',
'Blue'
]
};
  • 版权声明: 本博客所有文章,未经许可,任何单位及个人不得做营利性使用!转载请标明出处!如有侵权请联系作者。
  • Copyrights © 2015-2020 翟天野

请我喝杯咖啡吧~