Google Charts Timeline 使用 react-google-charts 更改条形高度答案

【问题标题】：Google Charts Timeline change bar height with react-google-chartsGoogle Charts Timeline 使用 react-google-charts 更改条形高度
【发布时间】：2021-09-05 14:14:10
【问题描述】：

我有这个谷歌图表时间线（使用 react-google-charts）。

 <Chart
   chartType="Timeline"
   data={data}
   width="100%"
   options={{
            allowHtml: true
            bar: { groupWidth: 10 },
          }}
  />

我尝试添加bar: { groupWidth: 10 }，它在正常条形图上工作，但在时间线上却不行。

在这里试试这个 jsfiddle：https://jsfiddle.net/c5hyknfr/2/

不适用于时间线。还有其他方法吗？

编辑：增加了赏金，以防有人知道 CSS 和/或使用类的任何解决方法。 Hacky 解决方案已获批准。

【问题讨论】：

时间线图中没有用于更改条形高度的选项...
您知道是否有解决方法吗？也许使用 CSS 类？并使用 !important? 手动添加 CSS？
你可以在图表的就绪事件上尝试css，或者手动修改图表的svg

标签： javascript reactjs charts google-visualization react-google-charts

【解决方案1】：

您可以增加条形标签的字体大小。这也将增加酒吧的高度。您需要在选项对象中添加barLabelStyle.fontSize-property：

var options = {
  timeline: {
    groupByRowLabel: true,
    showRowLabels: true,
    rowLabelStyle: {
      fontName: 'Helvetica',
      fontSize: 9,
      color: '#000000'
    },
    barLabelStyle: {
      fontSize: 30
    }
  },
  'width': 1100,
  'height': 2200,
  'chartArea': {
    width: '80%', // make sure this is the same for the chart and control so the axes align right
    height: '80%'
  },
  'backgroundColor': '#ffd',

  'view': {
    'columns': [0, 1, 4, 5]
  }
};

然后您可以调整您的 CSS 以再次减小字体大小，但您的条形将保持更大。请注意，条形图的标签不再正确居中。这就是为什么你需要转换位置，所以标签再次居中：

rect + text {
  font-size: 12px;
  transform: translate(0, -5px);
}

使用示例中的值，它将如下所示：

【讨论】：