[英]How to change options Google Charts Bar in react?
I am trying to create a bar chart with Google charts in react.我正在尝试用谷歌图表创建一个条形图。 I am researching for options field but I found when
chartType="Bar"
, the normal graph options doesn't work.我正在研究选项字段,但我发现当
chartType="Bar"
时,正常的图形选项不起作用。 It should be chartType="BarChart"
for working.它应该是
chartType="BarChart"
才能工作。 But when I do this chart will be horizontal, I want vertical.但是当我这样做时,这个图表将是水平的,我想要垂直的。 This is my code, how can I change
backgroundColor
or use options?这是我的代码,如何更改
backgroundColor
或使用选项?
<Chart
width={550}
height={350}
chartType="Bar"
loader={<div>Grafik Yükleniyor...</div>}
data={[
['Year', '2019/12', '2020/12'],
['Karlılık', 1000, 400],
['Verimlilik', 1170, 460],
['Kaldıraç', 660, 1120],
['Özkaynak', 1030, 540],
]}
options={{
colors: ['#0b2573','#2f8226'],
animation: {
duration: 2000,
easing: 'linear',
startup: true
},
backgroundColor: "transparent",
}}
// For tests
rootProps={{ 'data-testid': '2' }}
/>
</Col>
I believe that this is what you're looking for.我相信这就是你要找的。 You need to set the chart to 'ColumnChart' and not 'Bar'.
您需要将图表设置为“ColumnChart”而不是“Bar”。 Also, you had the color set to transparent instead of an actual color value.
此外,您将颜色设置为透明而不是实际的颜色值。
<Chart
width={550}
height={350}
chartType="ColumnChart"
loader={<div>Grafik Yükleniyor...</div>}
data={[
['Values', '2019/12', '2020/12'],
['Karlılık', 1000, 400],
['Verimlilik', 1170, 460],
['Kaldıraç', 660, 1120],
['Özkaynak', 1030, 540],
]}
options={{
title: 'Some Values',
chartArea: { width: '50%' },
hAxis: {
title: 'Measures',
minValue: 0,
},
vAxis: {
title: 'Amount',
},
backgroundColor: '#E4E4E4',
}}
legendToggle
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.