Chart.js V3.5 实现图例在数据名称后展示对应数值的问题咨询

解决方法 #

你修改legend.title不生效的原因是该配置用于定义整个图例的公共标题，并非单个图例项的文本控制参数。要实现图例项后展示对应数值，需要通过plugins.legend.labels.generateLabels回调函数自定义每个图例项的生成逻辑。

修改后的完整代码 #

var ctx = document.getElementById('top-five').getContext('2d');
var myChartpie = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: {!! $top->pluck('name') !!},
    datasets: [{
      label: 'Statistics',
      data: {!! $top->pluck('m_count') !!},
      backgroundColor: {!! $top->pluck('colour') !!},
      borderColor: {!! $top->pluck('colour') !!},
    }]
  },
  options: {
    plugins: {
      legend: {
        display: true,
        // 单个图例项配置
        labels: {
          // 自定义生成每个图例项
          generateLabels: function(chart) {
            // 先获取默认生成的图例项基础信息（保留色块、点击交互等原生特性）
            const defaultLabels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
            // 遍历每个图例项，拼接对应数值
            defaultLabels.forEach((labelItem, index) => {
              const value = chart.data.datasets[0].data[index];
              labelItem.text = `${labelItem.text} ${value}`;
            });
            return defaultLabels;
          }
        }
      },
    },
    responsive: true,
  }
});

注意事项 #

如果你使用的是Chart.js v2版本，将上述generateLabels配置移到options.legend.labels下即可，不需要外层包裹plugins节点。

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