Vue.js中用Chart.js展示完整日期范围折线图（无数据填0）

1. 补全日期数据集 #

首先需要生成2024年2月1日至29日的完整日期列表，再把服务器返回的零散数据映射到这个列表中，无数据的日期直接设为0：

// 生成指定区间的所有日期（YYYY-MM-DD格式）
function generateDateRange(startDateStr, endDateStr) {
  const dates = [];
  const start = new Date(startDateStr);
  const end = new Date(endDateStr);
  
  let current = new Date(start);
  while (current <= end) {
    const dateStr = current.toISOString().split('T')[0];
    dates.push(dateStr);
    current.setDate(current.getDate() + 1);
  }
  return dates;
}

// 服务器返回的原始数据
const serverData = {
  "2024-02-01 00:00:00": "2550",
  "2024-02-05 00:00:00": "3415",
  "2024-02-07 00:00:00": "10770"
};

// 生成2月完整日期列表
const fullDates = generateDateRange('2024-02-01', '2024-02-29');

// 转换为Chart.js兼容的数据集格式
const chartDataset = {
  labels: fullDates,
  datasets: [{
    label: '销售额',
    data: fullDates.map(date => {
      const serverKey = `${date} 00:00:00`;
      return serverData[serverKey] ? parseInt(serverData[serverKey]) : 0;
    }),
    borderColor: '#2E436C',
    fill: false,
    tension: 0.1
  }]
};

2. 修改Chart.js配置 #

调整你的chartData配置，强制X轴显示完整日期区间，并关联补全后的数据集：

chartData: {
  type: 'line',
  data: chartDataset, // 绑定处理好的完整数据集
  options: {
    aspectRatio: 3,
    color: '#2E436C',
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'yyyy-MM-dd'
          },
          // 强制设置X轴的起止日期，确保显示完整2月区间
          min: '2024-02-01',
          max: '2024-02-29'
        },
        grid: {
          display: false
        },
        // 可选：强制显示所有日期标签（避免自动跳过）
        ticks: {
          autoSkip: false,
          maxRotation: 45,
          minRotation: 45
        }
      },
      y: {
        beginAtZero: true // Y轴从0开始，更直观展示无数据的空值
      }
    }
  }
}

核心要点 #

• generateDateRange函数解决了原始数据缺失日期的问题，确保覆盖完整区间；
• 通过map方法将每个日期与服务器数据匹配，无数据项自动填充0；
• X轴配置中设置min和max是关键，强制Chart.js渲染指定的完整日期范围，不会只显示有数据的日期；
• 若日期标签过于拥挤，可去掉ticks里的autoSkip: false，让Chart.js自动优化显示。

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