Google Timeline 图表不支持直接设置数字型 X 轴标签或配置刻度，但可通过监听 'ready' 事件，利用 SVG DOM 操作精准识别并移除/隐藏默认的日期格式 X 轴标签，实现“无标签”或“视觉净化”的显示效果。
google timeline 图表不支持直接设置数字型 x 轴标签或配置刻度，但可通过监听 `'ready'` 事件，利用 svg dom 操作精准识别并移除/隐藏默认的日期格式 x 轴标签，实现“无标签”或“视觉净化”的显示效果。
Google Timeline 图表专为时间序列可视化设计，其 X 轴强制要求 date 类型数据（即使传入毫秒数也会被自动转为 Date 对象），因此当您用数值（如年份、阶段编号、自定义指标）模拟时间轴时，图表仍会将其渲染为标准日期字符串（例如 "Jan 1, 2024"），而官方 API 不提供 hAxis.ticks、hAxis.format 或 customLabels 等配置项来覆盖该行为。
遗憾的是，目前（截至 Google Charts v49+）Timeline 图表确实不支持任何形式的自定义 X 轴标签——既无法替换为数字、文本，也无法指定刻度位置。这是该图表类型的设计限制，非使用方式问题。
不过，一个稳定、兼容性良好的变通方案是：在图表绘制完成（'ready' 事件触发）后，通过原生 DOM 操作定位并移除所有位于时间轴区域下方的
- Timeline 渲染后，SVG 中最外层的
元素代表主图表区域（含时间轴）； - 所有 X 轴标签的 y 坐标均大于该
的 y + height（即位于其正下方）； - 遍历所有
节点，筛选出 y > rectBottom 的节点，并调用 .remove() 删除，或设 fill="transparent" 实现隐藏。
以下是完整可运行的实现代码（已优化健壮性与可维护性）：
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline" style="width: 100%; height: 300px;"></div>
<script>
google.charts.load('current', { packages: ['timeline'] }).then(() => {
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' });
const currentYear = new Date().getFullYear();
dataTable.addRows([
['Row 1', 'Phase A', new Date(currentYear, 0, 1), new Date(currentYear, 2, 31)],
['Row 1', 'Phase B', new Date(currentYear, 3, 1), new Date(currentYear, 5, 30)],
['Row 2', 'Phase C', new Date(currentYear, 6, 1), new Date(currentYear, 8, 31)],
['Row 2', 'Phase D', new Date(currentYear, 9, 1), new Date(currentYear, 11, 31)]
]);
function drawChart() {
chart.draw(dataTable, {
// 可选：禁用默认工具提示以进一步简化界面
tooltip: { isHtml: false }
});
}
google.visualization.events.addListener(chart, 'ready', () => {
const outerRect = Array.from(container.getElementsByTagName('rect'))
.filter(r => r.parentNode === container.querySelector('svg > g'))
.pop(); // 获取最外层图表矩形（更鲁棒的定位）
if (!outerRect) return;
const rectY = parseFloat(outerRect.getAttribute('y')) || 0;
const rectHeight = parseFloat(outerRect.getAttribute('height')) || 0;
const rectBottom = rectY + rectHeight;
const labels = container.getElementsByTagName('text');
// 倒序遍历，避免因 DOM 移动导致索引错乱
for (let i = labels.length - 1; i >= 0; i--) {
const y = parseFloat(labels[i].getAttribute('y')) || 0;
if (y > rectBottom + 2) { // +2 防止因渲染精度产生误判
labels[i].remove();
}
}
});
window.addEventListener('resize', drawChart);
drawChart();
});
</script>✅ 关键注意事项：
- 此方法不影响图表交互与功能（如悬停、缩放），仅修改视觉层；
- 避免在 'onmouseover' 或动画中频繁操作 DOM，'ready' 事件确保一次执行即可；
- 若需保留部分标签（如仅隐藏年份、显示季度），需结合 textContent 内容判断，但 Timeline 标签无语义类名，难度较高，推荐统一隐藏后，在图表下方手动添加 HTML 标注栏作为替代方案；
- 行标签（左侧 Row 名称）默认不可隐藏，若需隐藏，可同理查找 x 并移除，但需谨慎测试布局兼容性。
总结：虽然 Google Timeline 图表在 X 轴定制上存在硬性限制，但借助 SVG 结构特征与事件驱动的 DOM 操作，开发者仍能高效达成“无 X 轴标签”的专业呈现效果。对于强定制需求（如数字刻度、非时间语义轴），建议评估切换至 ChartWrapper + ComboChart 或第三方库（如 D3.js、ApexCharts）以获得完全控制权。
