如何更改 React Google Charts 背景颜色？

Question

我正在尝试更改图表的背景颜色以匹配我的身体背景颜色。

我尝试过执行以下两种背景颜色样式，但它似乎不起作用。关于如何解决这个问题有什么想法吗？

<Chart
                height={'300px'}
                width={'370px'}
                chartType='Bar'
                loader={<div>Loading Chart..</div>}
                data={[
                  ['', 'UPLIFT'],
                  ...topSpend.map(d => [d.PRODUCT, d.UPLIFT]),
                ]}
                options={{
                  chart: {
                    title: 'Spend Uplift',
             -----> backgroundColor: 'red'
                  },
                  colors: ['#FB7A21']
                }}
              />

<Chart
                height={'300px'}
                width={'370px'}
                chartType='Bar'
                loader={<div>Loading Chart..</div>}
                data={[
                  ['', 'UPLIFT'],
                  ...topSpend.map(d => [d.PRODUCT, d.UPLIFT]),
                ]}
                options={{
                  chart: {
                    title: 'Spend Uplift',
                  },
                  colors: ['#FB7A21'],
           -----> backgroundColor: 'red'
                }}
              />

Answer 1

您需要使用chartTypeas BarChart。由于某种原因，Bar似乎会引起问题。如果您希望图表条形垂直，请将其更改为ColumnChart。

你可以在这里看到工作小提琴