谷歌条形图不改变背景颜色

时间:2016-03-10 19:03:17

标签: javascript google-visualization

我正在使用google Material Charts静态api库,我无法弄清楚为什么我输入的背景颜色不会反映页面加载时的变化。

以下是我的选择:

var options = {
          backgroundColor: '#E8E4D8',
          chart: {
              title: 'Coaches by Service',
              subtitle: 'Coaches by Services: From 2016-09-10 until Today'
          }
      };

以下是我如何实例化图表:

 var chart = new google.charts.Bar(document.getElementById('chart_div'));

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

图表标题和副标题正确显示,对于为什么背景颜色保留为默认白色的任何建议都将非常感激。

2 个答案:

答案 0 :(得分:0)

还有更多可以分享的吗?似乎在这里工作......

也许,请检查您要加载的版本 在这里,我使用的是冻结版本'44',而不是'current'recent issues

google.charts.load('44', {
  callback: drawChart,
  packages: ['bar']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
  ]);

  var options = {
    backgroundColor: '#E8E4D8',
    chart: {
        title: 'Coaches by Service',
        subtitle: 'Coaches by Services: From 2016-09-10 until Today'
    }
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));

  chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

答案 1 :(得分:0)

For me it was missing google.charts.Bar.convertOptions

Originally it was like this.

chart.draw(data, options);

This works:

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