如何在Chart.js饼图图例上显示切片数值且避免tooltip重复展示

你可以通过自定义图例的标签生成回调实现需求，不需要修改原始labels数组，这样就不会影响悬浮提示框的内容，具体修改如下：

• 保留原始labels数组为纯文本标签，不拼接数值
• 在options.plugins配置项中新增legend的自定义渲染逻辑，手动在图例文本后拼接对应扇区的数值

注意：原代码中new chart的构造函数名首字母需要大写为Chart，否则可能会出现未定义的报错。

修改后的完整代码如下：

new Chart(
   document.getElementById('diagram_1').getContext('2d'), {
      type: 'pie',
      data: {
         // 保留原始纯文本标签，不要拼接数值
         labels: [
            'Завершенная задача',
            'Новая задача',
            'Ошибка выполнения'
         ],
         datasets: [{
            label: '# of Votes',
            data: [@successful_tasks, @new_tasks, @error_tasks],
            backgroundColor: [
               'rgba(54, 162, 235, 0.2)',
               'rgba(255, 206, 86, 0.2)',
               'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: [
               'rgba(54, 162, 235, 1)',
               'rgba(255, 206, 86, 1)',
               'rgba(255, 99, 132, 1)'
            ],
            borderWidth: 1
         }]
      },
      options: {
         scales: {
            y: {
               beginAtZero: true
            }
         },
         responsive: false,
         // 新增插件配置
         plugins: {
            legend: {
               labels: {
                  // 自定义图例标签生成逻辑
                  generateLabels: function(chart) {
                     // 先获取默认生成的图例项
                     const originalLabels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
                     // 遍历给每个图例项的文本拼接对应数值
                     originalLabels.forEach((label, index) => {
                        label.text = `${label.text}: ${chart.data.datasets[label.datasetIndex].data[index]}`;
                     });
                     return originalLabels;
                  }
               }
            }
         }
      }
   }
)

该方案下，悬浮提示框会默认读取原始的纯文本标签+对应数值，不会出现重复显示的问题，同时图例区域会正常展示拼接了数值的标签。

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