如何在 Chart.js 的饼图中添加标签

Chart.js 是一款流行的 JavaScript 数据可视化库，它提供了许多强大的功能，包括绘制饼图。在这篇文章中，我们将探讨如何为 Chart.js 饼图添加标签。

为什么需要添加标签？

在绘制 Chart.js 饼图时，默认情况下，每个扇形只显示其百分比值。但是，在某些情况下，我们可能希望显示扇形所代表的具体信息。例如，如果我们正在展示一个销售数据的饼图，并且每个扇形代表一种产品，那么我们可能希望在每个扇形上添加该产品的名称和销售额。

如何添加标签

要为 Chart.js 饼图添加标签，我们需要使用 Chart.js 提供的回调函数，在每个扇形上绘制文本。这里提供两种常用的方法。

方法一：使用 tooltips 回调函数

Chart.js 提供了 tooltips 回调函数，该函数可以为每个扇形上方的提示框添加文本。我们可以利用这个回调函数来绘制标签。具体步骤如下：

1. 在饼图配置中，设置 tooltips 回调函数：

   -- -------------------- ---- -------
   -------- -
     --------- -
       ---------- -
         ------ --------------------- ----- -
           -- ------------
         -
       -
     -
   -

2. 在回调函数中，获取当前扇形的名称和值，并在提示框上添加文本：

   label: function(tooltipItem, data) {
     var dataset = data.datasets[tooltipItem.datasetIndex];
     var value = dataset.data[tooltipItem.index];
     var label = dataset.labels[tooltipItem.index];
     return label + ": " + value;
   }

   在上面的示例代码中，我们获取了当前数据集、该数据集中当前扇形的值和名称，并将它们拼接为一个字符串返回。

方法二：使用 afterDraw 回调函数

除了使用 tooltips 回调函数外，我们还可以使用 Chart.js 提供的 afterDraw 回调函数，在每个扇形上直接绘制文本。具体步骤如下：

1. 在饼图配置中，设置 afterDraw 回调函数：

   options: {
     plugins: {
       afterDraw: function(chart) {
         // 在这里编写标签的绘制逻辑
       }
     }
   }

2. 在回调函数中，获取每个扇形的位置和名称，并在相应位置绘制文本：

   -- -------------------- ---- -------
   ---------- --------------- -
     --- --- - ----------
     --------------------------------------------- -
       --- ---- - - -- - - -------------------- ---- -
         --- ----- - ------------------------------------------------------------
         --- ----- - ---------------------------------------------------
         --- --------- - ----------------- - ------------------ - ------------------ - --
         --- ---------- - -----------------
         --- -------- - ---------------
         --- - - ------- - --------- - -------------------- - --------- - ---
         --- - - ------- - --------- - -------------------- - --------- - ---
         ------------- - -------
         --- ------- - --------------------------- - ----- - -----------------
         -- -------- - -- - -- -------- -- -------
           ------------------------------ - -- - - --------------- - - -- - ------- - ----- -- ---
         -
       -
     ---
   -

   在上面的示例代码中，我们获取了当前数据集、该数据集中每个扇

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30472