Chart-圆形和中空圆图

甜甜圈和派

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

使用示例

// 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将总计所有数字并计算每个数字的相对比例。 您还需要指定一组标签，以便正确显示工具提示

data = {
    datasets: [{
        data: [10, 20, 30]
    }],

    // These labels appear in the legend and in the tooltips when hovering different arcs
    labels: [
        'Red',
        'Yellow',
        'Blue'
    ]
};