0

Estou fazendo um gráfico utilizando google charts e quero alterar a cor do titulo.

Minhas configurações de gráfico são através de um arquivo json:

    'config' => array(
        'title' => 'Despesas',
        'width' => 400,
        'height' => 300,
        'backgroundColor' => 'transparent',
        'colors' => ['#AA8E26', 'grey', 'blue', 'orange'],
        'legend.alignment' => 'center',
        'is3D' => 'true',
        'titleTextStyle' => 'color', 'white',
    )
);

Pesquisei que é através do titleTextStyle.color que altera a cor, mas não estou conseguindo implementar utilizando json.

Tentei também: 'titleTextStyle: {color:' => 'white' '}',

0

1 Resposta 1

0

Se você jogar os dados em uma mesma linha a própria API distribui as cores das barras e seus respectivos títulos, mas caso você queira customizar você pode através das options do método Draw():

var options = {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};

Fontes:

Exemplo:

// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['rray', 3],
    ['Wallace', 1],
    ['Randrade', 1],
    ['Caique', 1],
  ]);

  // Set chart options
  var options = {
  'title':'Quem mais jogou CS no ano',
  'width':400,
  'height':300,
  'colors': ['#AA8E26', 'grey', 'blue', 'orange']
  };

  // Instantiate and draw our chart, passing in some options.
  var chart = new   google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div"></div>

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 .