ChartJS 饼图&环形图

  • 定义和使用

    饼图和环形图表可能是最常用的图表。它们被分成不同的部分,每个部分的圆弧表示每个数据的比例值。
    该图表在展示数据之间的关系比例方面非常出色。
    饼图和环形图在 Chart.js 中实际上是同一个类,但有一个不同的默认值 - cutoutPercentage。意味着内部的百分比被减少。饼图默认为 0,甜甜圈默认为 50。
    该图表在Chart核心中注册了两个别名。除了不同的默认值和不同的别名,其他是完全一样的。
    // 饼形图
    var myPieChart = new Chart(ctx, {
        type: "pie",
        data: data,
        options: options
    });
    尝试一下
    // 环形图
    var myDoughnutChart = new Chart(ctx, {
        type: "doughnut",
        data: data,
        options: options
    });
    尝试一下
  • 数据集属性

    环形/饼图允许为每个数据集指定多个属性以显示特定数据集。
    名称 类型 描述
    label String 图例和提示中显示的标签名
    backgroundColor Color[] 数据集中每个数据区域的填充色 参考 颜色(Colors)
    borderColor Color[] 边框色 参考 颜色(Colors)
    borderWidth Number[] 边框宽度
    hoverBackgroundColor Color[] 鼠标悬浮时的填充色
    hoverBorderColor Color[] 鼠标悬浮时边框色
    hoverBorderWidth Number[] 鼠标悬浮时边框宽度
  • 配置选项

    这些是 Pie&Donut 图表特有的自定义选项。这些选项与全局图表配置选项合并,组成最终选项。
    名称 类型 默认值 描述
    cutoutPercentage Number 50 - for doughnut, 0 - for pie 从中间切出的图表的百分比。
    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 将所有的数字汇总并计算每个数据的相对比例。
    你还需要指定一个标签数组,以便在 tooltips 中显示。
    data = {
      datasets: [
          {
              data: [10, 20, 30]
          }
      ],
    
      // These labels appear in the legend and in the tooltips when hovering different arcs
      labels: ["Red", "Yellow", "Blue"]
    };