google 图表更改背景颜色

Question

我在 Whosebug 上看到了一些以前的 questions/answers 但是这些答案中提供的 none 代码似乎有效用我的图表：这是我的代码：

<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>

htmldiv代码：

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

问题是我想将背景从白色更改为浅灰色而且我似乎无法通过声明 backgroundColor 使其工作：“#fcfcfc” 内部选项{}

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

我还尝试将 backgroundColor 变量指定为函数（后跟大括号 backgroundColor{ color: '#fcfcfc' } 但这对我的图表也不起作用。

如有任何帮助，我们将不胜感激。谢谢

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

Answer 1

首先，您把 backgroundColor: '#fcfcfc', 放错了地方。您已经在 chart:{} 内部定义了它，而您应该在任何对象外部或 chartArea 内部进行定义，例如：

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));

如 Bar Charts API page 中所指定。

我给你做了一个 fiddle 来玩玩看看区别：Link

google 图表更改背景颜色

google charts change background color

charts

background

google-visualization

background-color