Google Visualization Chart多Y轴上下排布实现方案问询

你提的需求完全可以在单个Google Visualization Chart中实现，不需要拆分两个独立图表，单图表方案可以保留你需要的统一crosshair功能。

Google Charts的折线图/组合图原生支持多Y轴配置，同时支持给不同Y轴指定独立的布局位置，你可以把图表的垂直空间拆分为上下两个区域：

• 上半部分分配给前两个数据序列，共用左侧的对数刻度Y轴
• 下半部分分配给第三个数据序列，使用独立的左侧线性刻度Y轴

两个区域共享同一个X轴，crosshair可以垂直贯穿整个图表，自动同步三个序列的X轴坐标点位。

以下是关键配置项的代码示例：

const chartOptions = {
  // 开启全局统一十字准星
  crosshair: {
    trigger: 'both',
    orientation: 'vertical'
  },
  // 配置两个Y轴
  vAxes: {
    // 0号Y轴：对应前两个序列，对数刻度
    0: {
      logScale: true,
      viewWindow: { min: 1, max: 1000 },
      textPosition: 'left',
      // 上半区布局参数
      top: '5%',
      height: '60%'
    },
    // 1号Y轴：对应第三个序列，线性刻度
    1: {
      logScale: false,
      viewWindow: { min: 0, max: 100 },
      textPosition: 'left',
      // 下半区布局参数，和上半区间隔5%
      top: '70%',
      height: '20%'
    }
  },
  // 绑定数据序列和对应Y轴
  series: {
    0: { targetAxisIndex: 0 },
    1: { targetAxisIndex: 0 },
    2: { targetAxisIndex: 1 }
  },
  // 统一设置图表区域宽度，保证上下区域X轴完全对齐
  chartArea: {
    width: '75%'
  }
}

你可以根据自己的数据范围调整两个Y轴的viewWindow参数，以及上下区域的高度占比，调整时注意预留足够的空间展示X轴标签即可。

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