Chart.js多数据集合并：扩展两点数据集并设置X轴起止刻度

需求回顾 #

• 原有2个数据点的数据集需覆盖整个图表范围，避免截断
• 添加200-400个非线性计算的数据集
• X轴仅显示起始、结束两个日期刻度

分步实现 #

1. 让两点数据集铺满整个图表 #

原数据集只有首尾两个点，只要把这两个点的X值设为图表X轴的最小、最大值（和新数据集的首尾日期一致），Chart.js就会自动把线段拉伸到整个图表宽度，不用额外加数据点。

示例原数据集代码：

const originalDataset = {
  label: '原有数据',
  data: [
    { x: '2024-01-01', y: 50 },
    { x: '2024-12-31', y: 80 }
  ],
  borderColor: '#ff0000',
  fill: false
};

2. 生成非线性数据集 #

用自定义函数生成200-400个非线性数据点，下面以指数增长为例：

// 生成指定数量的非线性数据点
const createNonlinearData = (startDateStr, endDateStr, count) => {
  const data = [];
  const start = new Date(startDateStr);
  const end = new Date(endDateStr);
  const totalDays = Math.ceil((end - start) / (1000 * 60 * 60 * 24));

  for (let i = 0; i < count; i++) {
    const progress = i / (count - 1);
    const currentDate = new Date(start);
    currentDate.setDate(start.getDate() + Math.floor(progress * totalDays));
    
    // 非线性计算逻辑，可根据需求修改
    const y = 20 + Math.pow(1.03, i) * 5;
    data.push({ x: currentDate.toISOString().split('T')[0], y });
  }
  return data;
};

// 生成300个非线性数据点
const nonlinearData = createNonlinearData('2024-01-01', '2024-12-31', 300);

const nonlinearDataset = {
  label: '非线性数据',
  data: nonlinearData,
  borderColor: '#00ff00',
  fill: false,
  tension: 0.4 // 让折线更平滑
};

3. 配置X轴仅显示首尾刻度 #

在图表配置里修改X轴的ticks回调，只保留首尾两个刻度：

const chartConfig = {
  type: 'line',
  data: {
    datasets: [originalDataset, nonlinearDataset]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'YYYY-MM-DD'
          }
        },
        min: '2024-01-01',
        max: '2024-12-31',
        ticks: {
          // 只渲染首尾两个刻度
          callback: (value, index, values) => {
            if (index === 0 || index === values.length - 1) {
              return new Date(value).toISOString().split('T')[0];
            }
            return '';
          }
        }
      }
    }
  }
};

效果对比 #

当前效果 #

目标效果 #

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