Chart JS Html Legend Plugin数据遍历及悬停显示百分比实现咨询

以下是针对两个需求的具体修改方法： #

1. HTML图例展示对应数据值 #

修改htmlLegendPlugin中生成图例文本的逻辑，通过item.index从图表数据集里获取对应项的数值，拼接在标签文本后即可。
找到插件内如下代码：

const text = document.createTextNode(item.text);
textContainer.appendChild(text);

替换为：

// 获取当前图例项对应的数据值
const itemValue = chart.data.datasets[item.datasetIndex].data[item.index];
const text = document.createTextNode(`${item.text}：${itemValue}`);
textContainer.appendChild(text);

如果需要在图例中直接展示百分比，可额外计算总和后拼接即可。 #

2. 鼠标悬停扇区显示占比百分比 #

在两个doughnut图表的options.plugins配置中新增tooltip回调，计算当前项占总数值的百分比并返回展示。
给两个图表的options.plugins对象添加如下配置：

tooltip: {
  callbacks: {
    label: function(context) {
      const label = context.label || '';
      const currentValue = context.parsed;
      // 计算当前数据集所有数值总和
      const total = context.dataset.data.reduce((sum, val) => sum + val, 0);
      // 计算百分比保留1位小数
      const percentage = ((currentValue / total) * 100).toFixed(1);
      return `${label}：${currentValue}（${percentage}%）`;
    }
  }
}

修改完成后即可实现悬停扇区时显示标签、数值、占比百分比的效果。 #

内容的提问来源于stack exchange，提问作者Eren GELGEC