如何为Google折线图及柱状图的默认tooltip添加X轴标签？

针对你提到的柱状图（以及折线图）默认Tooltip只显示Y轴信息的问题，这里有两种简单可靠的方案，都不需要用到HTML Tooltip，完全基于默认Tooltip的配置：

方案1：调整Tooltip的列显示范围 #

如果你的Tooltip只显示Y轴，大概率是配置里限制了显示的列。只需要在图表的options中，明确指定Tooltip要包含X轴和Y轴的列索引即可：

var options = {
  tooltip: {
    columns: [0, 1], // 0是X轴列（比如Year），1是Y轴列（比如Sales）
    isHtml: false // 明确使用默认Tooltip，默认值就是false，可省略
  }
};

配置后，鼠标悬停在2011的柱子上时，Tooltip就会同时显示Year: 2011和Sales: 1,500。

方案2：用DataTable角色自定义Tooltip内容 #

如果方案1不生效，你可以给X轴列添加tooltip角色，精确控制要显示的文本：

// 构建DataTable时添加tooltip角色列
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
// 新增tooltip角色列，对应X轴的显示文本
data.addColumn({type: 'string', role: 'tooltip'});

data.addRows([
  ['2010', 1000, 'Year: 2010'],
  ['2011', 1500, 'Year: 2011'],
  ['2012', 2000, 'Year: 2012']
]);

var options = {
  tooltip: {
    isHtml: false // 保持默认Tooltip样式
  }
};

这种方式可以灵活修改X轴在Tooltip中的显示格式，比如改成年份：2011也完全没问题。

折线图的适配说明 #

折线图的配置逻辑和柱状图完全一致，只要套用上面任意一种方案，就能让默认Tooltip显示X轴标签。举个简单的折线图例子：

var data = google.visualization.arrayToDataTable([
  ['Month', 'Website Visits'],
  ['Jan', 1200],
  ['Feb', 1800],
  ['Mar', 2200]
]);

var options = {
  tooltip: {
    columns: [0, 1],
    isHtml: false
  },
  curveType: 'function' // 折线图样式配置，不影响Tooltip
};

此时悬停折线点时，Tooltip会显示Month: Jan和Website Visits: 1,200。

小提示排查 #

• 如果还是看不到X轴信息，检查是否设置了tooltip.onlyShowBox: true，这个配置会隐藏标签文本，需要移除。
• 确认X轴列在DataTable中的索引，确保tooltip.columns里包含了它的索引（通常是0）。

内容的提问来源于stack exchange，提问作者Jason