更改谷歌图表(谷歌可视化）图形的背景颜色

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

本文关键字：谷歌 图形 背景 颜色 可视化      更新时间：2023-11-24

我试图简单地更改我使用谷歌图表创建的折线图的背景颜色。我觉得我在关注谷歌的官方文档，但我指定的任何更改都没有被应用。

我正在传递这样的选项：

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

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

我一定做错了什么，但就我的一生而言，我不知道是什么。

看起来您使用的是谷歌的材料折线图，而不是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/

相关文章：