1

Eu estou tentando definir as cores dos estados brasileiros, que estão vindo do mysql via json as informações, mas não estou tendo resultado no retorno das cores. Ex.:

São Paulo na cor Azul - Minas Gerais na cor Verde - Rio Grande do Sul na cor Vermelha

e assim por diante, como posso definir essas cores? Visto que estou fazendo da seguinte maneira:

colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: '#f5f5f5',

JSON

 $estados = Estados::selectRaw('SUM(valor) as valor, estado as estado')->groupBy('estado')->get();

    $arrayEstados[] = ['Estado', 'Valor'];

    foreach($estados as $key => $valor) {
        $arrayEstados[++$key] = [$valor->estado, $valor->valor]; 
    }

    dd($arrayEstados);

    return view('home', compact('notasEntrada', 'notasSaida', 'valorNotasEntrada', 'valorNotasSaida'))->with('nome', json_encode($array))->with('estados', json_encode($arrayEstados));

print do retorno JSON

sendo que assim, não estou controlando as cores dos estados.

Obrigado desde já

7
  • Você ta utilizando a biblioteca Lavacharts?
    – sant0will
    18/02/2019 às 17:03
  • Não estou usando nenhuma biblioteca @sant0will 18/02/2019 às 17:04
  • Sim, está usando a API Google Chart né
    – sant0will
    18/02/2019 às 17:09
  • Ah sim... somente ela! @sant0will 18/02/2019 às 17:11
  • como está seu json? edite a pergunta e coloque ele
    – sant0will
    18/02/2019 às 17:25

1 Resposta 1

0

Para teste foi usada a string(json) já com os valores.

A página receberá a string(json) do controller na variável tratada como $estados no código. Como você recebe um json na página, é necessário passar o conteúdo para uma array. Basta passar a array para a função da API.

Para adicionar as cores é necessário fazer as configurações no options com :

colorAxis:{
    colors:['red','green','blue'],
    minValue: 1,
    maxValue: 210
},

A forma que a api funciona é a seguinte: As cores são colocadas em forma de degrade colocando a primeira cor da configuração('red') para o menor valor e a ultima(no caso 'blue') para o maior.

Exemplo funcionando:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["geochart"]});
        google.setOnLoadCallback(drawRegionsMap);

        function drawRegionsMap() {
            let json = '[{"nome":"Distrito Federal","valor":100}, {"nome":"Goiás","valor":50}, {"nome":"Paraiba","valor":30}, {"nome":"Rio de Janeiro","valor":20}, {"nome":"Rio Grande do Sul","valor":1}, {"nome":"São Paulo","valor":210}]';

            // let estados = JSON.parse('<?php echo $estados ?>'); //seu caso
            let estados = JSON.parse(json); //teste
            let arr_estados = new Array();
            arr_estados.push(['Estado', 'Valor']);

            for (var k in estados) {
                arr_estados.push([estados[k].nome, estados[k].valor]);
            }

            var data = google.visualization.arrayToDataTable(arr_estados);

            var options = {
                region:'BR',
                displayMode: 'auto',
                resolution:'provinces',
                colorAxis:{
                    colors:['red','green','blue'],
                    minValue: 1,
                    maxValue: 210
                },
            };

            var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

            chart.draw(data, options);
        }
    </script>
    </head>
    <body>
        <div id="regions_div" style="width: 900px; height: 500px;"></div>
    </body>
</html>

Discussão para solucionar

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 .