如何用Chart.js将计数拼接至饼图图例标签并显示数值与百分比

没问题，我来帮你搞定这两个需求，咱们一步步调整你的代码就行：

1. 把计数拼接至饼图标签 #

你可以通过map方法将chartLabels和对应的chartData值直接拼接，替换原来的labels配置：

labels: chartLabels.map((label, index) => `${label} (${chartData[index]})`),

这样每个标签就会变成类似apples (60)的形式，直接展示对应计数。

2. 让图例显示数字与百分比 #

Chart.js支持通过legend.labels.generateLabels自定义图例内容，我们需要先计算数据总和，再逐个算出每个项的百分比，最后把数字和百分比拼到图例文本里：

首先在创建图表前计算总数据量：

const total = chartData.reduce((acc, curr) => acc + curr, 0);

然后在options.legend.labels里添加自定义生成方法：

generateLabels: function(chart) {
  const data = chart.data;
  if (data.labels.length && data.datasets.length) {
    return data.labels.map((label, index) => {
      const value = data.datasets[0].data[index];
      const percentage = ((value / total) * 100).toFixed(1); // 保留1位小数，可按需调整位数
      return {
        text: `${label.split(' (')[0]} - ${value} (${percentage}%)`, // 拆分标签避免重复显示计数
        fillStyle: data.datasets[0].backgroundColor[index],
        strokeStyle: data.datasets[0].backgroundColor[index],
        lineWidth: data.datasets[0].borderWidth
      };
    });
  }
  return [];
}

完整修改后的代码 #

另外注意你的backgroundColor只有3种颜色，但数据有4个，记得补全颜色避免第四个项用默认色：

createChart: function() {
  debugger;
  var chartData = [60, 90, 120, 150];
  var chartLabels = ['apples','bananas','oranges','pears'];
  const total = chartData.reduce((acc, curr) => acc + curr, 0); // 计算总数据量
  var chartCanvas = component.find("chart").getElement();
  var chart = new Chart(chartCanvas, {
    type: 'pie',
    data: {
      // 拼接标签与计数
      labels: chartLabels.map((label, index) => `${label} (${chartData[index]})`),
      datasets: [
        {
          label: "test",
          data: chartData,
          borderWidth: 0,
          // 补全4个颜色，适配4个数据项
          backgroundColor: [ "#f43004", "#decf3f", "#FFA500", "#2ecc71" ]
        }
      ]
    },
    options: {
      cutoutPercentage: 1,
      maintainAspectRatio: false,
      legend: {
        display: true,
        position:'right',
        fullWidth:false,
        reverse:true,
        labels: {
          fontColor: '#000',
          fontSize:10,
          fontFamily:"Arial, sans-serif SANS_SERIF",
          // 自定义图例内容
          generateLabels: function(chart) {
            const data = chart.data;
            if (data.labels.length && data.datasets.length) {
              return data.labels.map((label, index) => {
                const value = data.datasets[0].data[index];
                const percentage = ((value / total) * 100).toFixed(1);
                return {
                  text: `${label.split(' (')[0]} - ${value} (${percentage}%)`,
                  fillStyle: data.datasets[0].backgroundColor[index],
                  strokeStyle: data.datasets[0].backgroundColor[index],
                  lineWidth: data.datasets[0].borderWidth
                };
              });
            }
            return [];
          }
        },
        layout: {
          padding: 70,
        }
      }
    }
  });
}

我在图例文本里用label.split(' (')[0]去掉了标签里的计数部分，避免出现apples (60) - 60 (16.7%)这种冗余内容，如果你想保留完整标签也可以直接用label。

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