当使用 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，轴计算可能误判有效时间边界。
✅ 正确解法是主动声明时间轴的全局边界：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
// 在创建 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 轴始终展示完整业务周期，确保数据可比性与可视化稳定性。
