react-google-charts的Timeline时间线组件如何调整条形高度

bar.groupWidth属于柱状图、条形图专属配置项，Google Charts的Timeline类型并未适配该配置，因此原生配置无法直接调整条形高度，以下是两种可落地的实现方案：

方案1：CSS样式覆盖（实现最简单） #

给Chart组件添加自定义类名后直接覆盖SVG元素样式即可，适合不需要复杂逻辑的场景：

1. 组件代码示例：

<Chart
  chartType="Timeline"
  data={data}
  width="100%"
  className="custom-timeline"
  options={{
    allowHtml: true,
  }}
/>

2. CSS代码示例：

/* 选中时间线的条形元素 */
.custom-timeline svg g:first-of-type g rect {
  height: 10px !important;
  /* 调整y轴偏移，保证高度缩小后条形在原行区域居中 */
  transform: translateY(5px);
}
/* 同步调整左侧行标签位置，和条形对齐 */
.custom-timeline svg g:nth-of-type(2) g text {
  transform: translateY(5px);
}

注意：如果选择器不生效，可以打开浏览器控制台检查Timeline渲染的SVG结构，微调选择器匹配你使用的版本的渲染规则即可。

方案2：渲染回调动态修改属性（兼容性最好，无错位问题） #

利用react-google-charts提供的onReady回调，在图表渲染完成后批量修改条形的高度和坐标，适配所有渲染场景，包括数据更新后重绘的场景：

const handleChartReady = (chartWrapper) => {
  const container = chartWrapper.getContainer();
  const targetBarHeight = 10; // 自定义需要的条形高度

  // 调整所有条形的高度和位置
  const barList = container.querySelectorAll('svg g:first-child g rect');
  barList.forEach(bar => {
    const originHeight = Number(bar.getAttribute('height'));
    const originY = Number(bar.getAttribute('y'));
    // 计算居中需要的偏移量
    const offset = (originHeight - targetBarHeight) / 2;
    bar.setAttribute('height', targetBarHeight);
    bar.setAttribute('y', originY + offset);
  });

  // 同步调整左侧标签位置对齐条形
  const labelList = container.querySelectorAll('svg g:nth-child(2) g text');
  labelList.forEach(label => {
    const originY = Number(label.getAttribute('y'));
    label.setAttribute('y', originY + (targetBarHeight/2));
  });
};

// 组件绑定回调
<Chart
  chartType="Timeline"
  data={data}
  width="100%"
  options={{
    allowHtml: true,
  }}
  onReady={handleChartReady}
  // 如果有数据更新重绘场景，额外绑定onStateChange事件重复执行上述逻辑即可
/>

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