Google 图表背景颜色不适用于示例代码

Question

我使用 example page 中的代码创建水平条形图：

选项 backgroundColor 适用于其他图表类型，例如 this and that。

有没有办法改变条形图的背景颜色？

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>

图表

Answer 1

您正在使用 Material 条形图（参见 relevant documentation here。）
请参阅文档段落末尾的评论：

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));

所以如果你想考虑你的标准选项，你需要用 google.charts.Bar.convertOptions().

包装它们

试一试，效果很好。 See a jsfiddle of it here.

Google 图表背景颜色不适用于示例代码

Google Charts backgroundColor not working with example code

javascript

google-visualization