0

Tenho o Código:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Ano', 'Total', 'Mestrado', 'Doutorado'],
      ['2014', 1000, 400, 200],
      ['2015', 1170, 460, 250],
      ['2016', 660, 120, 300],
      ['2017', 1030, 540, 350]
    ]);

    var options = {
      chart: {
        title: 'Mestrados e Doutorados do IG',
        subtitle: 'Total, Mestrados e Doutorados',
      },
      bars: 'horizontal'
    };

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

    chart.draw(data, options);
  }
</script>

E está com o Fundo Branco, queria mudar para a cor #EEE. Já tentei backgroundColor: '#EEE' na options , mas com esse gráfico não foi (Consegui com Pie).

1 Resposta 1

1

Segundo esta resposta, você precisa fazer o seguinte:

Adicionar:

chartArea: {
  backgroundColor: '#EEE'
}

a variável options, em seguida trocar esse pedaço de código:

chart.draw(data, options

por:

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

Segundo a documentação, a utilização do metodo google.charts.Bar.convertOptions é necessária para tematização entre outras features que eram presentes no Google Charts clássico, segue o issue do GitHub também.

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Ano', 'Total', 'Mestrado', 'Doutorado'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 120, 300],
    ['2017', 1030, 540, 350]
  ]);

  var options = {
    chart: {
      title: 'Mestrados e Doutorados do IG',
      subtitle: 'Total, Mestrados e Doutorados'
    },
    bars: 'horizontal',
    chartArea: {
    	backgroundColor: '#fcfcfc'
    }
  };

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

  chart.draw(data, google.charts.Bar.convertOptions(options));
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div onload="drawChart">
  <div id="barchart_material"></div>
</div>

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .