更改Google Chart的内部颜色

Question

我有使用Material设计的Google条形图。我正在尝试更改其默认的白色背景颜色以匹配我的页面，但颜色仅更改图表的外边距。图表数据保持白色的内部区域。我在我的选项中使用了普通的backgroundColor和fill：...标识符，两者都给了我相同的结果。这是我的代码：

 var barchart_options = {
            width: 600,
            height:350,
            backgroundColor : '#CFC3F8',

            .......

使用填充标识符尝试时，我这样做了：

backgroundColor : {fill:'#CFC3F8'},

这是一个截图：

Answer 1

还有chartArea.backgroundColor

的选项

var options = {
  backgroundColor: '#CFC3F8',
  chartArea: {
    backgroundColor: '#CFC3F8'
  }      
};

且只需要颜色

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['bar']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
  ]);

  var options = {
    backgroundColor: 'magenta',
    chartArea: {
      backgroundColor: 'cyan'
    }
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));

  chart.draw(data, google.charts.Bar.convertOptions(options));
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>