Chart.js柱状图顶部显示数值失败，请求技术帮助

你的代码配置了datalabels插件但未生效，核心原因是没有引入chartjs-plugin-datalabels插件库——Chart.js本身不内置该插件，需单独引入才能启用数值显示功能。

修复步骤 #

1. 在HTML中引入chartjs-plugin-datalabels资源（放在Chart.js之后）：

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

2. 调整图表配置，通过锚点和对齐设置让数值精准显示在柱子顶部：

完整可运行代码示例：

<canvas id="myChart" width="200" height="100" aria-label="Hello ARIA World" role="img"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<script>
  const ctx = document.getElementById('myChart');
  console.log({{sales_performance|safe}})
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      datasets: [{
        label: 'Sales',
        data: [1, 10, 10, 11, 1, 10, 10, 11, 1, 10, 11, 16],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          display: false,
          beginAtZero: true
        }
      },
      plugins: {
        datalabels: {
          color: 'black',
          font: {
            weight: 'bold'
          },
          anchor: 'end', // 锚点设为柱子末端
          align: 'top', // 对齐方式设为顶部
          formatter: function(value) {
            return value;
          }
        }
      }
    },
    // 显式注册插件（部分Chart.js版本需要）
    plugins: [ChartDataLabels]
  });
</script>

关键说明 #

• 必须引入chartjs-plugin-datalabels插件，否则对应的配置项不会生效；
• anchor: 'end'和align: 'top'是确保数值显示在柱子顶部的核心设置；
• 部分Chart.js版本需要在图表配置的plugins数组中显式注册ChartDataLabels，否则插件无法被识别。

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