谷歌图表改变背景颜色

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>

问题是我想将背景从白色变为浅灰色,我似乎无法通过声明backgroundColor使其工作:"#fcfcfc"在options {}中

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

我还尝试将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页面上指定.

我让你成为一个小提琴,并看到差异:链接