如何为Doughnut环形图悬停tooltip的数值添加%后缀

现有基础配置 #

你当前的环形图数据配置如下：

const data = {
  maintainAspectRatio: false,
  responsive: false,
  labels: ["a", "b"],
  datasets: [
    {
      data: [50, 50],
      backgroundColor: ['rgba(12, 29, 213, 0.89)', 'rgba(49, 58, 52, 0.89)'],
      hoverBackgroundColor: ['#1f2bae','#242825']
    }
  ]
};

当前悬停提示仅展示纯数值，你需要将本身为百分比含义的数值拼接%后缀展示。

实现方案 #

在图表的options配置项中新增tooltip的回调配置即可，代码如下：

options: {
  tooltip: {
    callbacks: {
      label: function(data) {
        var label = data.dataset.label || '';
        if (data.parsed.y !== null) {
            label += data.parsed + '%';
        }
        return label;
      }
    }
  }
}

逻辑说明 #

• 自定义tooltip的label回调，接管提示内容的生成逻辑
• 优先保留数据集原有label内容（无则默认空值）
• 校验解析后的数值存在时，直接拼接%后缀返回，完成格式改造

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