Chart.js如何在给定标签间补全日期并填充0值数据？

方法1：手动预处理数据（无需额外依赖） #

先把现有日期和数据转成键值对映射，再生成起始到结束日期的完整序列，遍历每个日期匹配对应数据，无数据则填0。

代码示例： #

// 原始数据
const originalLabels = ['Aug 23','Aug 26','Aug 31','Sep 02'];
const originalData = [2750.00,1100.00,3080.00,4320.00];

// 1. 将日期和数据转为映射（统一日期格式为可识别的字符串）
const dateDataMap = new Map();
originalLabels.forEach((label, index) => {
  // 假设年份为当前年，可根据实际业务修改
  const date = new Date(`2024 ${label}`);
  // 转成YYYY-MM-DD格式作为键，避免格式差异
  const dateKey = date.toISOString().split('T')[0];
  dateDataMap.set(dateKey, originalData[index]);
});

// 2. 获取日期范围的首尾
const startDate = new Date(`2024 ${originalLabels[0]}`);
const endDate = new Date(`2024 ${originalLabels[originalLabels.length - 1]}`);

// 3. 生成完整的日期标签和对应数据
const fullLabels = [];
const fullData = [];

for (let currentDate = new Date(startDate); currentDate <= endDate; currentDate.setDate(currentDate.getDate() + 1)) {
  const dateKey = currentDate.toISOString().split('T')[0];
  // 格式化为"Aug 23"样式的标签
  const formattedLabel = currentDate.toLocaleDateString('en-US', { 
    month: 'short', 
    day: '2-digit' 
  });
  fullLabels.push(formattedLabel);
  // 有数据取数据，无数据填0
  fullData.push(dateDataMap.get(dateKey) || 0);
}

// 初始化图表
const salesChart = new Chart(document.getElementById('graph-sales'), {
  type: 'line',
  data: {
    labels: fullLabels,
    datasets: [{
      label: 'Sales',
      borderColor: '#ccc',
      data: fullData,
    }]
  }
});

方法2：使用Chart.js时间轴+适配器（自动规整日期轴） #

想用Chart.js自带的时间轴功能，必须搭配时间适配器（推荐轻量的chartjs-adapter-date-fns），同时需要将数据格式改为{x: 日期对象, y: 数值}的结构，再预处理填充缺失日期的0值。

步骤： #

1. 安装适配器：
   如果用npm管理依赖：

npm install chartjs-adapter-date-fns date-fns

如果用CDN，需在引入Chart.js之后，引入chartjs-adapter-date-fns的脚本（自行查找官方提供的CDN资源即可）。

2. 配置图表：

// 原始数据转成{x,y}格式，确保日期是标准Date对象
const originalDataPoints = [
  { x: new Date('2024 Aug 23'), y: 2750.00 },
  { x: new Date('2024 Aug 26'), y: 1100.00 },
  { x: new Date('2024 Aug 31'), y: 3080.00 },
  { x: new Date('2024 Sep 02'), y: 4320.00 },
];

// 填充缺失日期的辅助函数
function fillMissingDates(data, start, end) {
  const dataMap = new Map(data.map(item => [item.x.toISOString().split('T')[0], item.y]));
  const filledData = [];
  for (let currentDate = new Date(start); currentDate <= end; currentDate.setDate(currentDate.getDate() + 1)) {
    const dateKey = currentDate.toISOString().split('T')[0];
    filledData.push({
      x: new Date(currentDate),
      y: dataMap.get(dateKey) || 0
    });
  }
  return filledData;
}

const startDate = new Date('2024 Aug 23');
const endDate = new Date('2024 Sep 02');
const filledDataPoints = fillMissingDates(originalDataPoints, startDate, endDate);

// 初始化带时间轴的图表
const salesChart = new Chart(document.getElementById('graph-sales'), {
  type: 'line',
  data: {
    datasets: [{
      label: 'Sales',
      borderColor: '#ccc',
      data: filledDataPoints,
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day', // 按天划分坐标轴
          displayFormats: {
            day: 'MMM dd' // 坐标轴标签格式为"Aug 23"
          }
        },
        title: {
          display: true,
          text: 'Date'
        }
      },
      y: {
        title: {
          display: true,
          text: 'Sales'
        }
      }
    }
  }
});

说明： #

• 时间轴本身会自动按日期顺序渲染连续坐标轴，但默认不会为缺失日期填充0值，所以仍需要预处理数据补全；如果只是想让连线不中断，可在dataset里加spanGaps: true，但不会显示0值数据点。
• 适配器是Chart.js时间轴的必需依赖，它负责解析和格式化日期，没有的话时间轴功能无法正常工作。

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