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

Google Charts backgroundColor not working with example code

本文关键字：适用于 代码 不适用 颜色 背景 谷歌      更新时间：2023-09-26

>我使用示例页面中的代码来创建水平条形图：

选项背景颜色适用于其他图表类型，例如这个和那个。

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

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.draw(data, options);

。有了这个： 

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

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

试一试，效果很好。在这里看到它的jsfiddle。

相关文章：