上一节:
下一节:

  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"]
};
上一节:
下一节: