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

Question

我有这个谷歌图表时间线（使用 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 解决方案已获批准。

Answer 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);
}

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