如何在Chart.js右侧图例的单个标签右侧添加对应数据值？

当然可以实现这个效果，只需要通过自定义Chart.js的图例标签生成逻辑，将对应的数据值直接拼接到图例文本后方即可。

以下是修改后的完整代码：

$(document).ready(function() {
   var ctx = document.getElementById('mycanvas').getContext('2d');
   var chartData = [7, 3, 3, 4, 8];
   var chart = new Chart(ctx, {
      type: 'doughnut',
      data: {
         labels: ["CL", "ML", "Spl.L", "PD", "Other Permissions"],
         datasets: [{
            label: "My First dataset",
            backgroundColor: ['#F0CB8C', '#EE97A1', '#A9D5D4', '#E8A3D7', '#CFA3FD'],
            data: chartData,
         }]
      },
      options: {
         legend: {
            position: 'right',
            labels: {
               // 自定义图例标签生成函数
               generateLabels: function(chart) {
                  // 获取默认生成的图例配置
                  var defaultLabels = Chart.defaults.doughnut.legend.labels.generateLabels(chart);
                  // 遍历每个标签，拼接对应的数据值
                  return defaultLabels.map(function(labelItem, index) {
                     return {
                        text: `${labelItem.text} ${chartData[index]}`,
                        fillStyle: labelItem.fillStyle,
                        strokeStyle: labelItem.strokeStyle,
                        lineWidth: labelItem.lineWidth,
                        pointStyle: labelItem.pointStyle
                     };
                  });
               }
            }
         }
      }
   });
})

关键修改说明 #

• 重写了legend.labels.generateLabels函数，这是Chart.js提供的自定义图例内容的入口
• 先获取默认生成的图例配置，保留原有的样式（颜色、标记形状等）
• 通过map遍历每个图例项，将对应位置的数据值拼接到标签文本后

这样修改后，图例的每个标签右侧就会显示对应的数据值，和你期望的示例图片效果一致。

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