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

Question

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

我已经尝试在下面执行以下两种 backgroundColor 样式，但它似乎不起作用。关于如何解决这个问题的任何想法？

<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

您需要使用 chartType 作为 BarChart。出于某种原因，Bar 似乎会导致问题。如果您希望图表栏是垂直的，请将其更改为 ColumnChart。

您可以看到工作 fiddle here