如何在Google Chart垂直组合图中添加上下双坐标轴？

确实，Google Charts默认没有直接支持垂直方向图表的双水平轴（同时显示在顶部和底部），不过我们可以通过监听图表的ready事件，手动复制底部的依赖轴并将其定位到顶部来实现这个需求。下面是具体的实现步骤和代码示例：

核心思路 #

垂直图表的底部水平轴是通过SVG元素渲染的，我们可以在图表绘制完成后，克隆底部轴的SVG节点，调整其位置属性，将其添加到图表的顶部区域，从而实现双轴效果。

完整代码示例 #

// 初始化数据
const data = google.visualization.arrayToDataTable([
  ['Category', 'Value 1', 'Value 2'],
  ['A', 100, 150],
  ['B', 200, 250],
  ['C', 300, 300],
  ['D', 400, 350]
]);

// 图表配置（垂直Combo图）
const options = {
  title: '垂直Combo图双水平轴示例',
  orientation: 'vertical', // 设置为垂直方向
  seriesType: 'bars',
  series: {1: {type: 'line'}},
  hAxis: {
    title: '数值',
    minValue: 0,
    maxValue: 500
  },
  vAxis: {
    title: '类别'
  }
};

// 创建图表实例
const chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

// 监听图表ready事件（必须等待图表渲染完成才能操作DOM）
google.visualization.events.addListener(chart, 'ready', function() {
  const svg = document.querySelector('#chart_div svg');
  if (!svg) return;

  // 找到底部的水平轴组（依赖轴）
  // 可根据实际图表DOM结构调整选择器
  const bottomAxis = svg.querySelector('g[class*="axis"][transform*="translate"]:last-of-type');
  if (!bottomAxis) return;

  // 克隆底部轴节点
  const topAxis = bottomAxis.cloneNode(true);

  // 获取图表总高度，计算顶部轴的位置
  const chartHeight = svg.getAttribute('height');
  // 替换transform的y坐标，将轴移到顶部区域
  const bottomTransform = bottomAxis.getAttribute('transform');
  const topTransform = bottomTransform.replace(/translate\((\d+),\s*\d+\)/, `translate($1, 20)`);
  topAxis.setAttribute('transform', topTransform);

  // 调整轴标题位置（避免被图表标题遮挡）
  const bottomAxisTitle = bottomAxis.querySelector('text[text-anchor="middle"]');
  if (bottomAxisTitle) {
    const topAxisTitle = topAxis.querySelector('text[text-anchor="middle"]');
    if (topAxisTitle) {
      const titleY = parseInt(bottomAxisTitle.getAttribute('y')) - parseInt(chartHeight) + 40;
      topAxisTitle.setAttribute('y', titleY);
    }
  }

  // 将克隆的顶部轴添加到SVG中
  svg.appendChild(topAxis);
});

// 绘制图表
chart.draw(data, options);

关键细节说明 #

• 监听ready事件：必须等图表完全渲染完成后再操作DOM，否则无法找到轴元素。
• 轴节点选择器：不同版本的Google Charts DOM结构可能略有差异，你可以通过浏览器开发者工具查看图表的SVG结构，微调选择器确保能准确定位底部水平轴。
• 位置调整：通过修改transform属性的translate值，将克隆的轴移到顶部；轴标题的位置也需要手动调整，避免被图表主标题遮挡。
• 样式一致性：克隆的节点会继承底部轴的所有样式，所以顶部轴和底部轴的外观会保持完全一致。

如果你的图表有更复杂的配置（比如自定义刻度、特殊样式），可能需要微调DOM操作的细节，但核心思路都是克隆并重新定位轴元素。

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