当使用 Chart.js 的 time 类型 X 轴并启用图例全选/反选时，X 轴会自动缩放至当前可见数据的最小/最大时间范围，导致仅剩两个日期；需显式设置 min 和 max 属性锁定时间轴边界。

当使用 chart.js 的 time 类型 x 轴并启用图例全选/反选时，x 轴会自动缩放至当前可见数据的最小/最大时间范围，导致仅剩两个日期；需显式设置 `min` 和 `max` 属性锁定时间轴边界。

在 Angular（或其他框架）中集成 Chart.js 时，若为柱状图配置了 x: { type: 'time', time: { unit: 'day' } }，并采用 parsing 映射时间字段（如 xAxisKey: 'periodStartTime'），图表默认行为会在图例交互（如点击全部标签切换可见性）后动态调整 X 轴范围——仅覆盖当前已渲染数据点的时间跨度。这常导致：初始加载显示完整日期范围，但一旦点击图例将所有数据集设为可见（或不可见后重显），X 轴突然“收缩”至仅包含两个相邻日期，视觉上严重失真。

根本原因在于：Chart.js 的 time 轴在未指定 min/max 时，完全依赖数据驱动缩放。而 parsing 模式下，若多数据集共享同一时间轴字段但部分数据点在特定系列中为 null/undefined，轴计算可能误判有效时间边界。

✅ 正确解法是主动声明时间轴的全局边界：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

// 在创建 chart 前，预计算整个数据集的时间极值
const allTimestamps = this.dataSource.map(item => item.periodStartTime);
const sorted = allTimestamps.sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
const minDate = sorted[0];
const maxDate = sorted[sorted.length - 1];

this.chart = new Chart('eventsChart', {
  type: 'bar',
  data: {
    datasets: this.generateChartData(mergedKeys)
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day',
          tooltipFormat: 'dd MMM yyyy' // 可选：统一提示格式
        },
        min: minDate, // ← 关键：强制最小时间点
        max: maxDate  // ← 关键：强制最大时间点
      },
      y: {
        ticks: { stepSize: 1 }
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          title: (context) => {
            const d = new Date(context[0].parsed.x);
            return d.toLocaleDateString('en-US', {
              day: '2-digit',
              month: 'short',
              year: 'numeric'
            });
          }
        }
      }
    },
    aspectRatio: 2,
    maintainAspectRatio: false,
    responsive: true
  }
});

⚠️ 注意事项：

• min/max 值必须为 ISO 8601 字符串（如 '2023-05-01'）或 Date 对象，不能是时间戳数字；
• 若 periodStartTime 是毫秒时间戳，请先转换：new Date(timestamp).toISOString().split('T')[0]；
• 避免在 parsing 中使用无效时间值（如空字符串、'Invalid Date'），否则会影响 min/max 计算；
• 如需支持动态数据更新，应在每次 update() 前重新计算 min/max 并调用 chart.options.scales.x.min = ... 后执行 chart.update('active')。

通过显式固化时间轴边界，无论图例状态如何变化，X 轴始终展示完整业务周期，确保数据可比性与可视化稳定性。