Google Charts backgroundColor无法使用示例代码 [英] Google Charts backgroundColor not working with example code

问题描述

我使用示例页面中的代码创建单杠图表：

选项backgroundColor适用于其他图表类型，如此和 。

是有没有办法改变Bars图表的背景颜色？

google.load（'visualization'，'1.1'，{packages：['bar ']}）; function drawVisualization（）{//创建并填充数据表。 var data = new google.visualization.arrayToDataTable（[['Opening Move'，'Percentage']，[King's pawn（e4），44]，[Queen's pawn（d4），31]，[Knight to国王3（Nf3），12]，[女王的主教典当（c4），10]，['其他'，3]]）; var options = {backgroundColor：{fill：'＃000'}，//这是行不通的标题：'国际象棋开始移动'，宽度：900，图例：{position：'none'}，chart：{title：'国际象棋开幕动作'，字幕：'百分比流行度'}，酒吧：'水平'，//必填材质条形图。轴：{x：{0：{side：'top'，label：'Percentage'} //顶部x轴。 }}，bar：{groupWidth：90％}，}; var chart = new google.charts.Bar（document.getElementById（'top_x_div'））; google.setOnLoadCallback（drawVisualization）;

 < script src =http://www.google.com/jsapi?fake=.js>< / script>< div id =top_x_div>< / div>  

图表

解决方案

您正在使用材质栏图表（请参阅>相关文件在这里。）

请参阅文档末尾的注释：

材料图表处于测试阶段。外观和交互性在
很大程度上是最终的，但选项声明的方式不是。如果您是
将经典条形图转换为物料条形图，则需要
替换此行：

  chart.draw（data，options）; 
  

... with this：

  chart.draw（data，google.charts.Bar.convertOptions（options））; 
  

所以如果你想要考虑你的标准选项，你需要用 google.charts.Bar.convertOptions（）包装它们。

试试看，它效果很好。 在此处查看jsfiddle。

I use code from example page to create horizontal bars chart:

Option backgroundColor work for other chart types, like this and that.

Is there are way to change background color for Bars charts?

google.load('visualization', '1.1', {packages:['bar']});

function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.arrayToDataTable([
          ['Opening Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);
    
    var options = {
          backgroundColor: { fill: '#000' },//this is not working
          title: 'Chess opening moves',
          width: 900,
          legend: { position: 'none' },
          chart: { title: 'Chess opening moves',
                   subtitle: 'popularity by percentage' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'top', label: 'Percentage'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" },
        };
    
    var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    chart.draw(data, options);

}

google.setOnLoadCallback(drawVisualization);

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="top_x_div"></div>

chart

解决方案

You're using a Material Bar chart (See the relevant documentation here.)
See the comment at the end of the documentation paragraph :

The Material Charts are in beta. The appearance and interactivity are largely final, but the way options are declared is not. If you are converting a Classic Bar Chart to a Material Bar Chart, you'll want to replace this line:

chart.draw(data, options);

...with this:

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

So if you want your standard options taken into account you need to wrap them with google.charts.Bar.convertOptions().

Have a try, it works great. See a jsfiddle of it here.

这篇关于Google Charts backgroundColor无法使用示例代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！