Reactjs使用Chart.js实现柱状图时数据未按日期生成独立区块问题

解决方案 #

1. 先确认数据结构符合组件要求
   你需要保证传入的data参数包含labels字段，按顺序存放所有要展示的独立日期，datasets中每一项的data数值要和labels的顺序一一对应，示例结构如下：

const data = {
  // 每个元素对应一个独立柱状块的x轴标签
  labels: ['2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04'],
  datasets: [
    {
      data: [20, 35, 15, 40], // 和上面labels顺序一一对应，每个值对应一根柱子的高度
      backgroundColor: '#36A2EB'
    }
  ]
}

2. 调整x轴配置
   你当前的x轴配置没有明确指定轴类型，若x轴值为日期格式，Chart.js默认可能识别为时间轴做自动聚合，导致多个日期数据合并为同一根柱子。另外类别类型的x轴不需要配置ticks.beginAtZero，该参数只对数值轴生效，按你当前使用的Chart.js v2版本，修改options配置如下：

const options = {
  scales: {
    yAxes: [{
      display: true,
      ticks: {
        beginAtZero: true
      }
    }],
    xAxes: [{
      display: true,
      type: 'category', // 明确指定为类别轴，每个label对应独立柱子
      offset: true // 调整柱子对齐方式，避免边缘柱子被截断
    }]
  },
  legend: {
    display: false
  }
};

如果你后续升级到Chart.js v3及以上版本，scales配置语法有变更，调整为：

const options = {
  scales: {
    y: {
      display: true,
      ticks: {
        beginAtZero: true
      }
    },
    x: {
      display: true,
      type: 'category',
      offset: true
    }
  },
  plugins: {
    legend: {
      display: false
    }
  }
};

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