Chart.js时间序列多数据集柱状图绘制时数据丢失问题求助

嘿，我之前也碰到过Chart.js时间序列柱状图数据丢失的问题，大概率是因为时间轴的数据集没对齐完整日期点或者x轴的时间类型配置没做对导致的。咱们一步步来解决：

1. 补全所有数据集的日期点 #

Chart.js的柱状图在时间轴上，如果某个数据集缺少某个日期的数据，默认不会自动补全，直接就不显示该日期对应的柱子，看起来像是数据丢了。比如你提供的Dataset 2只写了2017-03-01的数据，后面日期没填的话，就只会显示这一天的柱子，其他天的Dataset 2柱子直接消失。

解决办法：给每个数据集补全所有需要展示的日期，缺失的数值可以设为null（不显示柱子）或者0（显示高度为0的柱子），示例代码如下：

var config = {
  type: 'bar',
  data: {
    datasets: [{
      label: "Dataset 1",
      data: [
        { x: new Date('2017-03-01'), y: 1 },
        { x: new Date('2017-03-02'), y: 2 },
        { x: new Date('2017-03-03'), y: 3 },
        { x: new Date('2017-03-04'), y: 4 }
      ],
      backgroundColor: "red"
    }, {
      label: "Dataset 2",
      data: [
        { x: new Date('2017-03-01'), y: 5 },
        { x: new Date('2017-03-02'), y: null }, // 缺失日期设为null，不显示柱子
        { x: new Date('2017-03-03'), y: 7 },
        { x: new Date('2017-03-04'), y: 8 }
      ],
      backgroundColor: "blue"
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time', // 必须指定x轴为时间类型
        time: {
          unit: 'day', // 按天划分轴刻度
          tooltipFormat: 'YYYY-MM-DD'
        },
        title: {
          display: true,
          text: '日期'
        }
      },
      y: {
        title: {
          display: true,
          text: '数值'
        }
      }
    }
  }
};

// 初始化图表
new Chart(document.getElementById('myChart'), config);

2. 必须配置时间轴适配器 #

如果x轴设置了type: 'time'但没引入时间适配器，Chart.js根本解析不了Date对象，会导致数据完全不显示或者日期轴混乱。这一点特别容易被忽略！

你需要引入适配库，比如用moment的适配器，直接通过CDN引入即可：

<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>

3. 统一日期格式与时间戳 #

确保所有数据集的x值都是格式一致的Date对象，别混合用字符串日期和Date对象，也别让同一日期的时间戳不一致（比如一个是凌晨0点，一个是下午3点）——这些情况都会让Chart.js把它们当成不同的x轴点，导致柱子错位或者丢失。

可以用这段代码验证日期的时间戳是否一致：

// 打印两个数据集的日期时间戳
config.data.datasets[0].data.forEach(item => console.log(item.x.getTime()));
config.data.datasets[1].data.forEach(item => console.log(item.x.getTime()));

如果同一日期的时间戳不同，就把所有日期统一成new Date('2017-03-01T00:00:00')这种格式。

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