如何在没有绘图功能的情况下更改 google 图表背景颜色

Question

这里。我有基本的 google 图表。我想更改图表的背景颜色。它与绘图功能配合得很好，但问题是我只需要更改 google 图表颜色而无需使用数据或绘图功能重新渲染。

像这样

function changeColor(){
   gchart.backgroundColor='red';
}

而不是这个。

function changeColor(){
   chartOption.backgroundColor='red';
   gChart.draw([somearrayToDataTable], chartOption)
}

Answer 1

如果您想更改图表的配置选项之一并更新图表，
唯一的办法就是重新绘制图表。

否则，您必须手动更改图表生成的 SVG，
在图表的就绪事件上。

在这种情况下，背景颜色将设置在图表的主要 <rect> 元素上。
在 ready 事件上，我们可以使用原始颜色查找元素并更改 'fill' 属性。

设置与颜色相关的配置选项时，
图表会将任何命名的颜色转换为十六进制值。

'red' = #ff0000

图表还会将配置选项中使用的任何十六进制值转换为小写。

#FF0000 将变为#ff0000

为此，我们必须在配置选项中使用小写的 HEX 值。
例如

backgroundColor: '#008000',  // <-- green

然后在准备事件中，我们可以找到具有该颜色的元素并更改它...

google.visualization.events.addListener(chart, 'ready', function () {
  var rectangles = chart.getContainer().getElementsByTagName('rect');
  Array.prototype.forEach.call(rectangles, function(rect) {
    if (rect.getAttribute('fill') === options.backgroundColor) {
      rect.setAttribute('fill', '#ff0000');
    }
  });
});

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y')
  data.addRows([
    [0, 0],
    [1, 1],
    [2, 2],
    [3, 3]
  ]);

  var options = {
    backgroundColor: '#008000',  // <-- green
    colors: ['#00ffff']
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart'));

  google.visualization.events.addListener(chart, 'ready', function () {
    var rectangles = chart.getContainer().getElementsByTagName('rect');
    Array.prototype.forEach.call(rectangles, function(rect) {
      if (rect.getAttribute('fill') === options.backgroundColor) {
        rect.setAttribute('fill', '#ff0000');  // <-- red
      }
    });
  });

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

如何在没有绘图功能的情况下更改 google 图表背景颜色

How can i change google chart Background color without draw function

javascript

charts

google-visualization