当时间线图的时间跨度不足6天时，Google Charts 会自动切换为小时级刻度，导致日期消失；本文提供完整解决方案，通过手动指定 hAxis.ticks、设置 minValue/maxValue 及禁用重叠网格线，确保始终以日粒度显示 X 轴标签。
当时间线图的时间跨度不足6天时，google charts 会自动切换为小时级刻度，导致日期消失；本文提供完整解决方案，通过手动指定 `haxis.ticks`、设置 `minvalue`/`maxvalue` 及禁用重叠网格线，确保始终以日粒度显示 x 轴标签。
Google Charts 的 Timeline 图表默认采用智能刻度策略：当时间范围较窄（如少于 6 天）时，它会自动降级为小时（甚至分钟）刻度以避免标签拥挤，但这恰恰违背了业务场景中“按天展示”的核心需求。解决该问题的关键不在于单纯修改 format 字符串，而在于显式控制刻度生成逻辑与坐标轴边界。
以下是经过验证的完整实现方案：
✅ 正确配置 hAxis 选项
var options = {
timeline: { showRowLabels: false },
avoidOverlappingGridLines: false, // 关键：禁用自动刻度压缩
hAxis: {
format: 'd MMM', // 简洁日期格式（如 "5 Jun"）
gridlines: { count: -1 }, // 强制使用自定义 ticks，忽略自动计算
minValue: startDate, // 必须是 Date 对象（非字符串）
maxValue: endDate, // 同上，确保覆盖全量数据范围
ticks: generateUniqueTicks(startDate, endDate) // 核心：每日一个刻度
},
chartArea: {
width: '90%',
height: '80%'
}
};
chart.draw(dataTable, options);
afterDraw();
✅ 自定义刻度生成函数（支持国际化格式）
function generateUniqueTicks(startDate, endDate) {
const ticks = [];
let currentDate = new Date(startDate);
while (currentDate ({
v: date, // 值必须为 Date 对象（供图表内部计算）
f: date.toLocaleDateString('en-GB', {
day: '2-digit',
month: 'short',
year: 'numeric'
}) // 显示格式（可替换为 'pt-BR' 等本地化）
}));
}
⚠️ 注意事项：
startDate和endDate必须是 JavaScriptDate实例（非字符串或毫秒数），建议从数据中解析后传入；ticks数组中的每个元素需同时包含v（原始值）和f（格式化字符串），否则format选项将失效；avoidOverlappingGridLines: false是关键开关，启用后图表不再自动跳过刻度以“防重叠”，从而保障每日标签可见；- 若数据动态更新，务必在每次
drawChart()前重新调用generateUniqueTicks()并更新options.hAxis.ticks。
✅ 安全增强版 afterDraw
原 afterDraw 函数依赖 DOM 顺序（如 g[1]），易因图表版本升级失效。优化如下：
function afterDraw() {
const svg = document.querySelector('svg');
if (!svg) return;
// 更鲁棒地定位 x 轴 group（查找含日期文本的 <g>）
const xAxisGroup = Array.from(svg.querySelectorAll('g'))
.find(g => g.querySelector('text')?.textContent?.match(/\d{1,2} \w{3}/));
if (xAxisGroup) {
const firstText = xAxisGroup.querySelector('text');
const y = parseFloat(firstText?.getAttribute('y')) || 0;
xAxisGroup.setAttribute('transform', `translate(0, ${-y - 20})`);
}
svg.style.overflow = 'visible';
svg.parentNode.style.top = '45px';
}</g>
最后，推荐添加响应式重绘监听：
window.addEventListener('resize', () => {
// 避免频繁触发，可加防抖
setTimeout(drawChart, 200);
});
通过以上配置，无论时间跨度是 1 天还是 30 天，X 轴均稳定显示逐日刻度，彻底规避 Google Charts 的默认“智能降级”行为，满足精确日期对齐的可视化需求。
