Chart.js柱状图：如何为每个数据集设置正确的下方标签？

问题出在数据集数据与标签的对应关系上：你设置了2个x轴标签，但每个数据集的data数组只有1个元素，这会导致两个数据集的柱子都绑定到第一个标签上，第二个标签因没有对应数据而处于空白区域。

要实现每个数据集的柱子下方显示对应标签，有两种可行方案：

方案1：调整数据结构（无需插件） #

让每个数据集的data数组与标签数组长度匹配，只在对应标签的位置填入数值，其余位置设为null，这样每个标签下只会显示对应数据集的柱子：

var powerChart = new Chart(powerCanvas, {
  type: "bar",
  data: {
    labels: ["Volts", "Amperes"],
    datasets: [
      {
        label: "Volts",
        data: [24.78, null], // 仅在Volts标签下显示柱子
        backgroundColor: "#FF6384"
      },
      {
        label: "Amperes",
        data: [null, 14.51], // 仅在Amperes标签下显示柱子
        backgroundColor: "#36A2EB"
      },
    ],
  },
  options: {
    scales: {
      x: {
        ticks: {
          autoSkip: false // 强制显示所有标签
        }
      }
    }
  }
});

方案2：使用数据标签插件（适合并排柱子场景） #

如果希望两个柱子紧挨着，各自下方显示对应标签，可以使用chartjs-plugin-datalabels插件，将数据集标签直接渲染在柱子下方，隐藏默认x轴标签：

// 先确保已引入chartjs-plugin-datalabels插件
var powerChart = new Chart(powerCanvas, {
  type: "bar",
  data: {
    labels: [""], // 占位标签，后续隐藏
    datasets: [
      {
        label: "Volts",
        data: [24.78],
        backgroundColor: "#FF6384"
      },
      {
        label: "Amperes",
        data: [14.51],
        backgroundColor: "#36A2EB"
      },
    ],
  },
  options: {
    scales: {
      x: {
        ticks: {
          display: false // 隐藏默认x轴标签
        }
      }
    },
    plugins: {
      datalabels: {
        formatter: (value, ctx) => ctx.dataset.label,
        anchor: "end",
        align: "bottom",
        color: "#333",
        font: {
          weight: "bold"
        }
      }
    }
  },
  plugins: [ChartDataLabels] // 注册插件
});

两种方案都能实现你需要的“每个数据集柱子下方对应标签”的效果，可根据实际布局需求选择。

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