ChartJS时间序列缺失数据填充为0的实现问题求助

要实现固定时间刻度、缺失值显示为0的需求，核心是先构建完整的时间轴，再将现有数据映射到对应位置，缺失项补0。以下是修改后的代码和关键逻辑说明：

关键逻辑 #

1. 生成完整时间刻度：创建包含00:00到23:00所有整点的数组，作为x轴的固定标签
2. 数据映射：将现有数据转为时间:数值的键值对，方便快速查找
3. 填充缺失值：遍历完整时间刻度，存在数据则取原值，不存在则填0

修改后的完整代码 #

// 原始数据
const originalTimestamps = ['15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','0:00','2:00','3:00','4:00','5:00','6:00','7:00','14:00'];
const originalTargets = [17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17];

// 1. 生成完整的24小时时间标签（格式化两位数字，比如0:00转为00:00）
const fullTimeLabels = Array.from({length:24}, (_, i) => {
  const hour = i.toString().padStart(2, '0');
  return `${hour}:00`;
});

// 2. 将原始数据转为键值对，方便查找
const dataMap = {};
originalTimestamps.forEach((time, index) => {
  // 统一时间格式，比如把0:00转为00:00，避免匹配错误
  const formattedTime = time.padStart(5, '0');
  dataMap[formattedTime] = originalTargets[index];
});

// 3. 填充完整数据集，缺失值设为0
const fullTargets = fullTimeLabels.map(time => {
  return dataMap[time] || 0;
});

var ctx = document.getElementById('chart').getContext("2d");

var data = {
  labels: fullTimeLabels, // 使用完整时间刻度
  datasets: [{
      data: fullTargets, // 使用填充后的数据集
      borderColor: "rgba(255,0,0,1)",
      backgroundColor: "rgba(255,0,0,0.2)", // 给柱状图加半透明背景，方便查看
      borderWidth: 1,
      spanGaps: false,
      tooltips: {
        enabled: true // 开启tooltip查看数值
      }
    }
  ]
};

var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true,
        min: 0,
        max: 300
      }
    }],
    xAxes: [{
        type: 'category', // 手动生成固定标签后，用category类型更稳定
        ticks: {
          autoSkip: false, // 强制显示所有24个标签
          maxRotation: 90, // 标签旋转避免重叠
          minRotation: 90
        }
    }]
  },
  elements: {
    point: {
      radius: 0,
      hitRadius: 5,
      hoverRadius: 5
    },
    line: {
      tension: 0
    }
  },
  legend: {
    display: false
  },
  pan: {
    enabled: true,
    mode: 'xy',
    rangeMin: {
      x: null,
      y: null
    },
    rangeMax: {
      x: null,
      y: null
    }
  },
  zoom: {
    enabled: true,
    drag: true,
    mode: 'xy',
    rangeMin: {
      x: null,
      y: null
    },
    rangeMax: {
      x: null,
      y: null
    }
  },
};

var chart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});

额外说明 #

• 统一时间格式（如0:00转为00:00），避免因格式不一致导致匹配失败
• 将x轴改为category类型，相比time类型更易控制固定刻度的显示
• 增加了柱状图背景色和tooltip，提升数据查看体验

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