开始使用Chart.js：PIE，DONUT和BUBBLE图表

本教程将介绍如何使用 Chart.js 创建饼图、环形图和气泡图。此前，我们已学习了 Chart.js 的四种图表类型：折线图和条形图（教程二），以及雷达图和极地区域图（教程三）。

创建饼图和环形图

饼图和环形图非常适合展示某个整体被划分为不同部分的比例。例如，可以使用饼图展示野生动物园中雄狮、雌狮和幼狮的百分比，或不同候选人在选举中获得的投票百分比。

饼图仅适用于比较单个参数或数据集。需要注意的是，饼图无法绘制值为零的实体，因为饼图中扇形的角度取决于数据点的数值大小。这意味着任何占比为零的实体都将不会显示在图表上。同样，饼图也无法绘制负值。

在 Chart.js 中，通过将 type 键设置为 pie 可以创建饼图，将 type 键设置为 doughnut 可以创建环形图。以下是一个创建这两种图表的示例：

var pieChart = new Chart(votesCanvas, {
    type: 'pie',
    data: votesData,
    options: chartOptions
});

var doughnutChart = new Chart(votesCanvas, {
    type: 'doughnut',
    data: votesData,
    options: chartOptions
});

让我们创建一个饼图，展示 2015 年五大石油出口国的石油出口数据（单位：十亿美元）。

var data = {
    labels: [
        "沙特阿拉伯",
        "俄罗斯",
        "伊拉克",
        "阿联酋",
        "加拿大"
    ],
    datasets: [
        {
            data: [133.3, 86.2, 52.2, 51.2, 50.2],
            backgroundColor: [
                "#FF6384",
                "#63FF84",
                "#84FF63",
                "#8463FF",
                "#6384FF"
            ]
        }]
};

您可以使用不同的键来控制上述图表的显示，例如 cutout，它可以是数字或字符串。如果指定为数字，则该值被认为是像素值；如果指定为以 % 结尾的字符串，则该值被认为是总半径的百分比。您可以使用 rotation 键指定图表的起始角度。同样，您还可以使用 circumference 键指定图表在绘制数据时扫描的角度。这两个角度都以度数而不是弧度表示。

绘制图表时可以激活两种不同的动画。您可以使用 animateRotate 键指定图表是否应该具有旋转动画。同样，您还可以使用 animateScale 键指定环形图是否应该从中心缩放。animateRotate 的值默认为 true，animateScale 的值默认为 false。

像往常一样，您可以分别使用 backgroundColor、borderColor 和 borderWidth 键控制所有数据点的背景颜色、边框颜色和边框宽度。同样，所有这些属性的悬停值可以使用 hoverBackgroundColor、hoverBorderColor 和 hoverBorderWidth 键来控制。

以下是为上述数据创建环形图的代码。将 rotation 的值设置为 -90 将起始点设置为逆时针旋转 90 度。

var oilData = {
  labels: ["沙特阿拉伯", "俄罗斯", "伊拉克", "阿联酋", "加拿大"],
  datasets: [
    {
      data: [133.3, 86.2, 52.2, 51.2, 50.2],
      backgroundColor: ["#FF6384", "#63FF84", "#84FF63", "#8463FF", "#6384FF"],
      borderColor: "black",
      borderWidth: 2
    }
  ]
};

var chartOptions = {
  rotation: -90,
  cutout: "45%",
  plugins: {
    title: {
      display: true,
      position: "bottom",
      text: "2015 年主要石油出口国",
      font: {
        size: 32
      }
    },
    legend: {
      position: "left",
      align: "start"
    }
  },
  animation: {
    animateRotate: false,
    animateScale: true
  }
};

var donutChart = new Chart(oilCanvas, {
  type: "doughnut",
  data: oilData,
  options: chartOptions
});

创建气泡图

气泡图用于在图表上绘制或显示数据的三个维度 (p1、p2、p3)。气泡的位置和大小决定了这三个数据点的值。水平轴表示第一个数据点 (p1)，垂直轴表示第二个数据点 (p2)，气泡的面积用于表示第三个数据点 (p3) 的值。

需要注意的是，第三个数据点的大小不是由气泡的半径表示，而是由它们的面积表示。圆的面积与半径的平方成正比。这意味着您必须确保您绘制的气泡半径与第三个数据点大小的平方根成正比。

在 Chart.js 中，通过将 type 键的值设置为 bubble 可以创建气泡图。以下是如何创建气泡图的示例：

var bubbleChart = new Chart(popCanvas, {
    type: 'bubble',
    data: popData,
    options: chartOptions
});

让我们使用气泡图绘制房间里不同物品的重量。图表的数据需要以对象的格式传递。数据对象需要具有以下接口才能正确绘制。

{
    x: <number>,
    y: <number>,
    r: <number>
}</number></number></number>

气泡图与所有其他图表的一个重要区别在于气泡半径不会随图表缩放。

例如，条形图中条形的宽度会根据图表大小而增加或减少。气泡图不会发生这种情况。气泡的半径始终等于您指定的精确像素数。这是有意义的，因为在这种图表类型中，半径实际上用于表示真实数据。

让我们创建一个气泡图来绘制森林中不同地点的鹿群数量。

var popData = {
  datasets: [
    {
      label: ["鹿群数量"],
      data: [
        { x: 100, y: 0, r: 10 },
        { x: 60, y: 30, r: 20 },
        { x: 40, y: 60, r: 25 },
        { x: 80, y: 80, r: 30 },
        { x: 20, y: 30, r: 25 },
        { x: 0, y: 100, r: 5 }
      ],
      backgroundColor: "#FF9966"
    }
  ]
};

由于这里的半径与实际数量的平方根成正比，因此 (80, 80) 处的鹿的数量是 (0, 100) 处的鹿的数量的 36 倍。

与所有其他图表类型一样，您可以使用 backgroundColor、borderColor 和 borderWidth 键控制绘制点的背景颜色、边框颜色和边框宽度。同样，您还可以使用 hoverBackgroundColor、hoverBorderColor 和 hoverBorderWidth 键指定悬停背景颜色、悬停边框颜色和悬停边框宽度。

您还可以使用 hoverRadius 键指定要在悬停时添加到不同气泡的额外半径。请记住，此半径将添加到原始值以绘制悬停的气泡。如果原始气泡的半径为 10，而 hoverRadius 设置为 5，则悬停时气泡的半径将等于 15。

var popData = {
  datasets: [
    {
      label: ["鹿群数量"],
      data: [
        { x: 100, y: 0, r: 10 },
        { x: 60, y: 30, r: 20 },
        { x: 40, y: 60, r: 25 }
      ],
      backgroundColor: "#9966FF",
      hoverBackgroundColor: "#FFFFFF",
      hoverBorderColor: "#9966FF",
      hoverBorderWidth: 5,
      hoverRadius: 5
    },
    {
      label: ["长颈鹿数量"],
      data: [
        { x: 80, y: 80, r: 30 },
        { x: 20, y: 30, r: 25 },
        { x: 0, y: 100, r: 5 }
      ],
      backgroundColor: "#FF6600",
      hoverBackgroundColor: "#FFFFFF",
      hoverBorderColor: "#FF6600",
      hoverBorderWidth: 5,
      hoverRadius: 5
    }
  ]
};

var chartOptions = {
  plugins: {
    title: {
      display: true,
      position: "bottom",
      text: "不同热点地区的动物数量",
      font: {
        size: 20
      }
    },
    legend: {
      position: "bottom",
      align: "center"
    }
  },
  layout: {
    padding: 20
  }
};

上述参数将创建以下气泡图。

总结

在本教程中，您学习了 Chart.js 中提供的另外三种图表类型。您现在应该能够选择合适的图表类型来绘制数据，并为不同的键设置特定值来控制其外观。在下一个教程中，您将学习如何操作不同图表类型的刻度。

以上是开始使用Chart.js：PIE，DONUT和BUBBLE图表的详细内容。更多信息请关注PHP中文网其他相关文章！