谷歌图表改变背景颜色

Question

我在StackOverflow上看到了一些之前的问题/答案，但是那些答案中提供的代码似乎都不能与我的图表配合使用： 这是我的代码：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1.1", {packages:["bar"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Sales', 'Expenses'],
      ['January', 200, 150],
      ['February', 1170, 460],
      ['March', 660, 1120],
      ['April', 1030, 540],
      ['May', 1030, 540],
      ['June', 1030, 540]
    ]);

    var options = {

          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: May-August',
            backgroundColor: '#fcfcfc',
          }

    };

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

    chart.draw(data, options);
  }
</script>

HTML div 代码如下：

<div id="columnchart_material" style="width: 650px; height: 500px;"></div>

事情是我想把背景从白色改为浅灰色，但我似乎无法通过在options{}中声明backgroundColor: "#fcfcfc'来实现它。

有没有其他方法在该图表上声明背景颜色？我想也许我使用的图表类型不能改变它的背景颜色。

我还尝试将backgroundColor变量指定为函数（加花括号的backgroundColor{color：'#fcfcfc'}），但这在我的图表上也不起作用。

任何帮助都将不胜感激。 谢谢

jsFiddle：http://jsfiddle.net/mtypsnqy/

- user3772

Answer 1

首先，你把backgroundColor: '#fcfcfc',放错位置了。你在chart:{}内部定义的，但应该将其定义在任何对象的外部或者chartArea内部，如下所示：

backgroundColor: '#fcfcfc'

var options = {
   chart: {
     title: 'Company Performance',
     subtitle: 'Sales, Expenses, and Profit: May-August'
   },
   backgroundColor: '#fcfcfc'
};

这将导致包含图表的整个 div 变为深灰色，或者像这样:

var options = {
   chart: {
     title: 'Company Performance',
     subtitle: 'Sales, Expenses, and Profit: May-August'
   },
   chartArea:{
      backgroundColor: '#fcfcfc'
  }
};

这将导致仅对包含在您的两个轴范围内的区域进行红色着色。

最后，您必须更改您的

chart.draw(data, options);

到

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

根据柱状图API页面上的规定。

我为您创建了一个演示，可以在其中进行操作并查看差异：链接。

- Henrik Aronsson

---

谢谢 Henrik。实际上，我尝试了您提出的第一个选项，但没有任何反应。显然，我必须修改 chart.draw() 函数，才能使更改生效。 - user3772

这就是我缺失的部分：chart.draw(data, google.charts.Bar.convertOptions(options)); …谢谢。 - Patrick

我看到了很多类似问题的答案，但没有一个包括 chart.draw(data, google.charts.Bar.convertOptions(options)); 这个解决方法。谢谢。 - achasinh