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

Question

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

我已经尝试了下面两种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

Answer 2

'Bar'被认为是一个重要的图表。

vs. 'BarChart'，这是一个经典图表。

对于材料图表，需要使用选项转换方法...

google.charts.Bar.convertOptions

这意味着您需要访问google.charts名称空间。

options={google.charts.Bar.convertOptions({
  chart: {
    title: 'Spend Uplift',
  },
  colors: ['#FB7A21'],
  backgroundColor: 'red'
})}