如何在 React 中更改选项 Google 图表栏？

Question

我正在尝试使用 Google 图表在 React 中创建条形图。我正在研究选项字段，但我发现 chartType="Bar" 时，普通图形选项不起作用。它应该是 chartType="BarChart" 用于工作。但是当我做这个图表时，它是水平的，我想要垂直的。这是我的代码，如何更改 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>

Answer 1

我相信这就是您要找的。您需要将图表设置为 'ColumnChart' 而不是 'Bar'。此外，您将颜色设置为透明而不是实际颜色值。

  <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
  />

如何在 React 中更改选项 Google 图表栏？

How to change options Google Charts Bar in react?

javascript

reactjs

react-google-charts