Chart.js堆叠条形图如何仅在最顶部条形显示数据标签

问题说明 #

• 基于JS + Chart.js开发单根堆叠条形图，已隐藏坐标轴，仅保留单组堆叠条
• 已完成基础图表配置、自定义标签基础设置，需要仅在堆叠结构最顶部的红色条形上显示标签
• 对formatter配置项逻辑不熟悉，当前复用的formatter代码无法控制标签显示范围，所有条形上都会渲染标签

核心逻辑 #

chartjs-plugin-datalabels的标签控制规则非常简单：

• formatter函数接收两个入参：当前条形对应的数据值value、渲染上下文context（可获取当前数据集索引、图表实例等信息）
• 只要formatter返回null、undefined或空字符串，对应位置的标签就不会渲染，这就是控制标签显示范围的核心原理
• 单根堆叠条形的堆叠顺序和datasets数组顺序完全一致：数组中靠前的数据集在堆叠底层，靠后的数据集在堆叠上层，数组最后一个数据集就是最顶部的条形

修改步骤 #

1. 调整数据集顺序，将需要显示标签的红色条形对应数据集移到datasets数组末尾，保证它处于堆叠最顶部
2. 修改datalabels.formatter判断逻辑，仅当当前渲染的是最顶部条形时返回标签内容，其余位置返回null隐藏标签

完整可运行代码 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>

<div class="col-8 offset-2 my-5">
        <div class="card">
            <div class="card-body">
                Stacked Bar Chart in Chart JS
                <hr>
                <canvas id="barchart"></canvas>
            </div>
        </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

<script>
const ctx = document.getElementById('barchart').getContext('2d');
const myChart = new Chart(ctx, {
  plugins: [ChartDataLabels],
  type: 'bar',
  data: {
      labels: [1],
      datasets: [
      // 底层橙色条形
      {
          label: 'Hyper',
          data: [12],
          backgroundColor: ['orange'],
          borderColor: ['orange'],
          borderWidth: 1
      },
      // 最顶部红色条形（移至数组最后一位保证在堆叠顶层）
      {
          label: 'Hypo',
          data: [12],
          backgroundColor: ['red'],
          borderColor: ['red'],
          borderWidth: 1
      }]
  },
  options: {
      plugins: {
          legend: {
              display: false
          },
          datalabels: {
              color: 'black', 
              labels: {
                  title: {
                      font: {
                          family: "sans-serif",
                          size: 100,
                          weight: 'bold'
                      }
                  }
              },
              formatter: function(value, context) {
                  const totalDatasetCount = context.chart.data.datasets.length;
                  // 仅最顶层数据集返回标签内容，其余返回null隐藏
                  return context.datasetIndex === totalDatasetCount - 1 
                      ? context.chart.data.labels[context.dataIndex] 
                      : null;
              }
          }
      },
      scales: {
          x: {
              stacked: true,
              display: false,
          },
          y: {
              beginAtZero: true,
              stacked: true,
              display: false,
          },
      }
  }
});
</script>

如果后续需要更换顶部显示标签的条形，只需要把对应数据集移到datasets数组最后一位即可，不需要修改其他配置逻辑。

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