Gráfico - Definir cores

15 de junho de 2019 2 respostas Resolvido

Cleiton_Conceicao 15 de junho de 2019

galera estou tentando definir uma cor para cada barra do gráfico, porém não conseguir.
estou usando umas bibliotecas do morris dashboards, li a documentação e me mandam utilizar
barcolor: [’#00cccc’], mas não funciona.
vou deixar meu código abaixo…

Morris.Bar({
                element: "morris-bar-chart",
                data: [{
                    y: "Em Atendimento",
                    a: {{$dados->emAte}},
                    barcolor: ['#00cccc']
                }, {
                    y: "Reencaminhamento",
                    a: {{$dados->Encerrado}}
                }, {
                    y: "Em Espera",
                    a: {{$dados->Reencaminhamento}}
                }, {
                    y: "Encerrado",
                    a: {{$dados->Espera}}
                }],
                xkey: "y",
                ykeys: ["a"],
                
                labels: ["Quantidades"],
                hideHover: "auto",
                resize: true
            });

2 Respostas

Cleiton_Conceicao 16 de jun. de 2019

Alguém?

Solucao aceita

Cleiton_Conceicao 18 de jun. de 2019

Resolvido!!

utilzo uma função js para gerar as cores aleatoriamente…
como meu gráfico sempre terá no máximo 4 barras passei um array fixa.

var randomColorGenerator = function () { 
    return '#' + (Math.random().toString(16) + '0000000').slice(2, 8); 
};

$(document).ready(function () {
     @foreach($dados as $dados)
        var $arrColors = [randomColorGenerator(), randomColorGenerator(),  randomColorGenerator(), randomColorGenerator()];
            Morris.Bar({
                element: "morris-bar-chart",
                data: [{
                    y: "Em Atendimento",
                    a: {{$dados->emAte}},
                    fill:"red"   
                }, {
                    y: "Reencaminhamento",
                    a: {{$dados->Reencaminhamento}}
                }, {
                    y: "Em Espera",
                    a: {{$dados->Espera}}
                }, {
                    y: "Encerrado",
                    a: {{$dados->Encerrado}}
                }],
                xkey: "y",
                ykeys: ["a"],
                labels: ["Quantidades"],
                hideHover: "auto",
                barColors: function (row, series, type) {
                return $arrColors[row.x];
                }, 
                resize: true
            });
     @endforeach
   });

Criado 15 de junho de 2019

Ultima resposta 18 de jun. de 2019

Respostas 2

Participantes 1

2 Respostas

Topicos relacionados