Google Charts使用react-google-charts更改条形图高度
Google Charts使用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解决方案已获批准。
回答 1
Stack Overflow用户
发布于 2021-09-16 08:16:15
您可以增加条形图标签的字体大小。这也会增加条的高度。您需要在options--property中添加barLabelStyle.fontSize对象：
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);
}使用示例中的值，它将如下所示：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69064178
复制相关文章
相似问题
腾讯云开发者
