javascript - Google Charts backgroundColor not working with example code - Stack Overflow

admin管理员组

文章数量:1420159

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="=.js"></script>
<div id="top_x_div"></div>

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./jsapi?fake=.js"></script>
<div id="top_x_div"></div>

chart

• javascript
• google-visualization

Share Improve this question Follow asked Jan 27, 2015 at 18:34 GeorgeGeorge 64399 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You're using a Material Bar chart (See the relevant documentation here.)
See the ment 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.

本文标签： javascriptGoogle Charts backgroundColor not working with example codeStack Overflow