Chart.js如何通过datalabels插件设置数据标签字号、颜色与位置

需要在柱状图每个柱条顶部添加黑色、大字号的数据标签，实现柱顶显示清晰数值标签的效果，现有配置执行后标签未正常渲染。

已引入依赖 #

已引入3.8.0版本Chart.js、2.0.0版本chartjs-plugin-datalabels对应的脚本文件。

原有失效代码 #

function bars_chart(data, period) {
        Chart.register(ChartDataLabels)
        document.querySelector('#chartContainer').innerHTML = '<canvas id="bar-chart-horizontal"></canvas>'

        var chartConfig = {
          type: 'bar',
          data: {
              labels: period,
              datasets: data
            },
          options: {
              responsive: true,
              plugins: {
                  dataLabels: {
                      font: {
                          color: "#000000",
                          size: 25
                      },
                      color: "#000000"
                  },
                  legend: {
                      position: 'top',
                  },
                  title: {
                      display: true,
                      text: 'Chart.js Bar Chart'
                  },
              }
          },
        };

        new Chart(document.getElementById("bar-chart-horizontal"), chartConfig);
    }

失效原因 #

• 配置键名错误：chartjs-plugin-datalabels v2版本对应的配置键为全小写的datalabels，原有代码用了驼峰写法dataLabels，插件无法读取配置，是标签不生效的核心原因
• 属性层级错误：标签颜色color是和font平级的属性，不能写在font对象内部，font对象仅支持字体大小、字重、字体族这类字体本身的配置
• 缺少位置配置：原有代码没有指定标签位置，默认标签会显示在柱条内部，不符合柱顶显示的需求

修复后完整代码 #

// 插件注册建议挪到函数外全局执行一次即可，无需每次绘图重复注册
Chart.register(ChartDataLabels)

function bars_chart(data, period) {
  document.querySelector('#chartContainer').innerHTML = '<canvas id="bar-chart-horizontal"></canvas>'

  const chartConfig = {
    type: 'bar',
    data: {
      labels: period,
      datasets: data
    },
    options: {
      responsive: true,
      plugins: {
        // 注意配置键为全小写datalabels
        datalabels: {
          color: "#000000",
          // 将标签锚点设置在柱条末端
          anchor: 'end',
          // 标签对齐到锚点上方，即柱顶外侧位置
          align: 'top',
          font: {
            size: 25,
            weight: 'bold' // 可选配置，加粗标签提升可读性
          }
        },
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: 'Chart.js Bar Chart'
        }
      }
    }
  }

  new Chart(document.getElementById("bar-chart-horizontal"), chartConfig)
}

提示：如果需要调整标签和柱顶的间距，可以在datalabels配置项中添加offset参数，单位为像素，例如offset: 8即可让标签和柱顶保持8px的距离。

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