如何更改 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。

你可以看到工作小提琴here

Answer 2

'Bar' 被视为材料图表。

对比'BarChart'，这是一个经典图表。

与材质图表，需要使用选项转换方法...

google.charts.Bar.convertOptions

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

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