Chart.js 4.4.2：如何在柱状图柱子上方堆叠显示另一数据集标签？

要实现把“3h rain”的数值堆叠显示在降水概率柱子上方的需求，需要对数据集配置和datalabels插件做以下修改：

关键修改点 #

• 移除“3h rain”数据集的hidden: true（hidden会隐藏包括标签在内的整个数据集），改为隐藏该数据集的可视化元素（线条、点）
• 给“3h rain”配置datalabels规则，设置位置、格式和显示逻辑
• 修正数据空值处理，确保datalabels能正常识别数值
• 调整两个数据集的datalabels偏移量，实现上下堆叠效果

修改后的完整代码片段 #

const chartCtr = document.querySelector('#temp-chart1') as HTMLCanvasElement;
new Chart(chartCtr, {
  type: 'line',
  plugins: [ChartDataLabels],
  options: {
    layout: {
      padding: {
        bottom: 10.15,
      },
    },
    maintainAspectRatio: false,
    animation: false,
    plugins: {
      legend: {
        display: false,
      },
    },
    scales: {
      x: {
        adapters: {
          date: {
            locale: enUS,
          },
        },
        type: 'time',
        ticks: {
          stepSize: 3,
          major: {
            enabled: true,
          },
        },
        time: {
          unit: 'hour',
          tooltipFormat: 'HH:mm',
        },
        position: 'top',
      },
      yTemp: {
        ticks: {
          display: false,
        },
        grid: {
          drawTicks: false,
        },
        border: {
          display: false,
        },
      },
      yPop: {
        display: false,
        max: getMaxValueWithPadding(),
      },
      yLev: {
        display: false,
      },
    },
  },
  data: {
    labels: forecast.map((row) => row.date),
    datasets: [
      {
        label: 'temp every 3 hrs',
        data: forecast.map((row) => row.temp),
        yAxisID: 'yTemp',
        datalabels: {
          display: false,
        },
      },
      {
        label: 'probability of preciptation',
        data: forecast.map((row) => row.pop),
        yAxisID: 'yPop',
        type: 'bar',
        datalabels: {
          anchor: 'end',
          align: 'end',
          font: {
            weight: 'bold',
          },
          offset: 10, // 调整偏移，给下方的雨量标签留出空间
          formatter: (value) => `${((value as number) * 100).toFixed()}%`,
        },
      },
      {
        label: '3h rain',
        yAxisID: 'yLev',
        data: forecast.map((row) => {
          // 空值改为0，避免datalabels无法识别
          return (row.rain ?? 0) + (row.snow ?? 0);
        }),
        // 隐藏数据集的可视化元素，只保留标签
        showLine: false,
        pointRadius: 0,
        datalabels: {
          anchor: 'end',
          align: 'top', // 定位到降水概率标签的上方
          font: {
            weight: 'bold',
          },
          offset: 30, // 调整偏移，实现上下堆叠
          // 只显示非0的数值，格式化为带单位的字符串
          formatter: (value) => {
            const numValue = Number(value);
            return numValue > 0 ? `${numValue.toFixed(1)} mm` : '';
          },
        },
      },
    ],
  },
});

说明 #

1. 隐藏数据集可视化元素：通过showLine: false和pointRadius: 0让“3h rain”的线条和点都不显示，替代原来的hidden: true，这样datalabels能正常渲染
2. datalabels位置调整：两个数据集的anchor都设为end（柱子顶部），降水概率用align: 'end'+小偏移，雨量用align: 'top'+更大偏移，实现上下堆叠
3. 数据处理优化：把空值改为0，再通过formatter过滤掉0值的显示，避免标签混乱
4. 格式控制：雨量标签添加单位，保留1位小数，提升可读性

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