更改 Google 图表（Google 可视化）图表的背景颜色

Question

我正在尝试简单地更改使用 Google 图表创建的折线图的背景颜色。我觉得我正在遵循 Google 的 Official Documentation，但正在应用我指定的 none 更改。

我像这样传递选项：

  var options = {
      backgroundColor: 'black',
      chartArea: {
                backgroundColor: 'black'
            },
      crosshair: {
          orientation: 'vertical'
      },
      animation: {
          startup: true,
          duration: 5000
      },
    width: 500,
    height: 300     
  };

但他们几乎都被忽略了。有关示例，请参见此 JSFiddle：http://jsfiddle.net/zgznoe3v/

我一定是做错了一些非常明显的错误，但对于我的生活我无法弄清楚是什么。

Answer 1

您似乎在使用 Google 的 Material Line Charts 而不是 Classic Line Charts。所以你必须使用

转换选项对象

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

见http://jsfiddle.net/zgznoe3v/6/

如果您不想这样做，可以坚持使用经典图表。所以不用

  google.load('visualization', '1.1', {packages: ['line']});
  var chart = new google.charts.Line(document.getElementById('chart_div'));
  chart.draw(data, options);

尝试

  google.load('visualization', '1.1', {packages: ['corechart']});
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);

见http://jsfiddle.net/zgznoe3v/5/

更改 Google 图表（Google 可视化）图表的背景颜色

Changing background colour of a Google Charts (Google Visualization) Graph

javascript

css

google-visualization