Google Timeline 图表不支持原生配置 X 轴标签格式，但可通过监听 'ready' 事件并操作 SVG 元素，精准移除或隐藏默认日期型 X 轴标签，从而适配以数字为时间刻度的业务场景。
google timeline 图表不支持原生配置 x 轴标签格式，但可通过监听 `'ready'` 事件并操作 svg 元素，精准移除或隐藏默认日期型 x 轴标签，从而适配以数字为时间刻度的业务场景。
Google Timeline 图表专为时间区间可视化设计，其 X 轴强制要求 date 类型数据（即使传入毫秒数也需包装为 Date 对象）。这导致一个常见痛点：当业务逻辑实际使用纯数值刻度（如版本号、阶段序号、归一化时间戳等）时，图表仍会将这些数字解析为日期并显示为 "Jan 1, 1970" 等无意义字符串——而官方 API 并未提供 hAxis.ticks、hAxis.format 或 labelFormatter 等定制化选项。
所幸，Timeline 基于 SVG 渲染，且具备标准的 'ready' 事件钩子，使我们能在图表绘制完成后，通过 DOM 操作精准定位并处理 X 轴标签。核心思路是：
✅ 利用
✅ 遍历所有
✅ 对其执行 remove()（彻底移除）或 setAttribute('fill', 'transparent')（视觉隐藏，保留布局）。
以下为完整可运行示例，已适配响应式重绘：
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline" style="width: 100%; height: 400px;"></div>
<script>
google.charts.load('current', { packages: ['timeline'] }).then(function () {
const container = document.getElementById('timeline');
const chart = new google.visualization.Timeline(container);
const dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Row' });
dataTable.addColumn({ type: 'string', id: 'Bar' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
// 示例：用数值刻度模拟“阶段编号”（如 1.0, 1.5, 2.0...），转为 Date(毫秒)
const scaleToMs = (num) => num * 86400000; // 1单位 = 1天（可根据需求调整）
dataTable.addRows([
['Phase 1', 'Task A', new Date(scaleToMs(1.0)), new Date(scaleToMs(1.8))],
['Phase 1', 'Task B', new Date(scaleToMs(1.3)), new Date(scaleToMs(2.2))],
['Phase 2', 'Task C', new Date(scaleToMs(2.1)), new Date(scaleToMs(3.0))]
]);
function drawChart() {
chart.draw(dataTable, { timeline: { groupByRowLabel: true } });
}
google.visualization.events.addListener(chart, 'ready', function () {
const outerRect = Array.from(container.getElementsByTagName('rect'))
.filter(r => r.parentNode === container || r.parentNode?.tagName === 'SVG')[0];
if (!outerRect) return;
const rectY = parseFloat(outerRect.getAttribute('y')) || 0;
const rectH = parseFloat(outerRect.getAttribute('height')) || 0;
const rectBottom = rectY + rectH;
// 反向遍历，避免 remove 后索引错位
const labels = Array.from(container.getElementsByTagName('text'));
for (let i = labels.length - 1; i >= 0; i--) {
const labelY = parseFloat(labels[i].getAttribute('y')) || 0;
if (labelY > rectBottom + 5) { // +5 增加容差，确保覆盖所有轴标签
labels[i].remove();
// 若需保留占位（如防止布局抖动），改用：labels[i].setAttribute('fill', 'transparent');
}
}
});
window.addEventListener('resize', drawChart);
drawChart();
});
</script>⚠️ 关键注意事项：
- 时机必须是 'ready' 事件：'onload' 或 draw() 后立即操作均无效，此时 SVG 尚未生成；
- 定位逻辑依赖 SVG 结构：Google Charts 版本升级可能微调 DOM 层级，建议在 outerRect 查找逻辑中增加健壮性校验（如检查 parentNode.tagName === 'SVG'）；
- 替代方案权衡：若需展示有意义的数值标签（如 "Stage 1", "v2.3"），推荐改用 ComboChart + Bars + 自定义 hAxis.ticks，Timeline 并非数值轴场景的最佳选择；
- 无障碍影响：移除标签后，屏幕阅读器将无法获取 X 轴信息，如需合规，应配合 aria-label 或外部图例补充说明。
综上，该方案是以最小侵入方式解决 Timeline 数值刻度显示问题的务实之选——它不依赖未公开 API，兼容主流版本，且代码简洁可控。
