1

Fiz um código em js e php porém não estou achando onde que está setando a cor dos números que mostram os valores em cima dos pontos das linhas do gráfico. Preciso saber em que momento que seta a cor vermelha nos números.

Código:

<div class="large-12 columns">
    <div class="header panel">
        <canvas id="canvasBG"></canvas>
    </div>
</div>

<script>

var dataBG = {
    labels: [ <?php foreach($class->Lista("BG") as $dados){ echo '"'.$dados->getQtTotalOrigem().'",'; }?> ],
    datasets: [{
        label: "Entregas",
        backgroundColor: window.chartColors.red,
        borderColor: window.chartColors.red,
        data: [ <?php foreach($class->Lista("BG") as $dados){ echo $dados->getQtTotalDestino().','; }?> ],
        fill: false,            
    }, {
        label: "Efetivas",
        backgroundColor: window.chartColors.blue,
        borderColor: window.chartColors.blue,
        data: [ <?php foreach($class->Lista("BG") as $dados){ echo $dados->getQtTotalFinal().','; }?> ],
        fill: false,
    }, {
        label: "Veiculos",
        fill: false,
        backgroundColor: window.chartColors.green,
        borderColor: window.chartColors.green,
        data: [ <?php foreach($class->Lista("BG") as $dados){ echo $dados->getQtAtrasadoOrigem().','; }?> ],
    }]

};

var ctx = document.getElementById("canvasBG").getContext("2d");
window.myBar = new Chart(ctx, {
    type: 'line',
    data: dataBG,
    options: {

        "hover": {
            "animationDuration": 0
        },
        "animation": {
            "duration": 1000,
            "onComplete": function() {
                var chartInstance = this.chart,
                ctx = chartInstance.ctx;

                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';


                this.data.datasets.forEach(function(dataset, i) {
                    var meta = chartInstance.controller.getDatasetMeta(i);
                    meta.data.forEach(function(bar, index) {
                        var data = dataset.data[index];
                        ctx.fillText(data, bar._model.x, bar._model.y - 1);
                    });
                });
            }
        },

        responsive: true,
        title:{
            display:true,
            text:'Apuração de entregas'
        },
        legend: {
            "display": true,
            position: 'bottom',
        },
        tooltips: {
            "enabled": false
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: false,
                    labelString: 'Month'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: false,
                    labelString: 'Value'
                }
            }]
        }
    }
});
</script>

Gráfico:

inserir a descrição da imagem aqui

2
  • Você quer alterar só as cores dos números? Commented 19/10/2017 às 17:39
  • Isso mesmo, só os números.
    – Kevin.F
    Commented 19/10/2017 às 17:59

2 Respostas 2

2

O chartsjs possui uma série de atributos com funcionalidades especificas na questão de aparencia do objeto renderizado.

Um exemplo para as 'labels' da legenda (retirada da própria documentação):

var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            display: true,
            labels: {
                fontColor: 'rgb(255, 99, 132)'
            }
        }
    }
});

No seu caso, você quer modificar a cor do dataset, a função backgroundColor é um função de 'dataset' não da 'label', por isso sempre fica com a mesma cor, no caso, pega a cor informada na última chamada.

Para conseguir o resultado desejado, deve-se informar as cores como uma propriedade de dataset, mas em forma de array, uma cor para cada label:

data: {
    labels: ["Entregas", "Efetivas", "Veiculos"],
    datasets: [{
        label: 'Dados',
        data: ['Dados'],
        backgroundColor: [
            '#D3E4F3'
        ],
        borderColor: [
            '#000',
            '#999',
            '#ccc'
        ],
        borderWidth: 1
    }]
}

A mesma coisa vale para qualquer atributo de dataset, não se passa junto aos dados, e sim uma array para cada função que você quer fora dos dados.

Exemplo funcional:

Chart.defaults.global.legend.labels.usePointStyle = true;

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
    labels: ["Entregas", "Efetivas", "Veiculos"],
    datasets: [{
        label: 'Dados',
        data: [17,9,29],
        backgroundColor: [
            '#fff',
            '#000',
            '#ccc'
        ],
        borderColor: [
            '#000',
            '#999',
            '#ccc'
        ],
        fontColor: [
            '#000',
            '#999',
            '#ccc'
        ],
        borderWidth: 1
    }]
},
    options: {
        legend: {
            display: true,
            position: 'bottom',
            labels: {
                fontColor: '#333'
            }
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div class="container">
  <canvas id="myChart"></canvas>
</div>

Fontes:

Doc. Sobre estilos

Recomendação de leitura do porque não alterar as cores se não souber o que está fazendo:

8% Better — Data Graphics and Colour Vision

ATUALIZAÇÃO

Para definir a cor dos values é preciso seguir:

    datasets: [
            {
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1,
            backgroundColor: '#000',
            borderColor: '#000'
            },  
                {
                    label: '# of Points',
                    data: [7, 11, 5, 8, 3, 7],
                    borderWidth: 1,
            backgroundColor: '#ccc',
            borderColor: '#ccc'

                }
    ]

Porém, para charts em 'LINE' ele vai sempre colocar uma unica cor a todas as lines, não há na documentação referente a type='line' nenhuma função indicando para mudar a cor do 'value', ou seja, não há como, repare bem que esta definindo apenas cor da borda e do background, nunca do label do valor.

Por que todas as cores ficaram iguais ?

Porque você definiu o 'backgroudColor', e a line com maiores valores, vao ter seu backgroundColor a frente das demais, perceba que no seu exemplo, se o valor das 'efetivas' se tornar maior que o de 'entregas' a cor dos values irá ficar azul.

Isso pode ser um bug do plugin, ou mesmo que ele tenha sido feito para operar assim, resumindo, você não vai conseguir mudar a cor do values em um type=line sem alterar/extender o plugin.

PS: pode haver gambiarras pra isso, mas desconheço algum modo que vá funcionar.

4
  • Fiz e não da certo, me mostra um exemplo funcionando com type line não com type bar. E outra, o que eu quero mudar é só a fonte dos números acima.
    – Kevin.F
    Commented 20/10/2017 às 12:47
  • Coloca esse gráfico funcionando no jsfiddle com alguns dados, vc só não ta sabendo onde por a cor, ai eu ja arrumo la Commented 20/10/2017 às 12:58
  • @Kevin.F leia a atualização da resposta. Commented 20/10/2017 às 13:30
  • Agora eu entendi.
    – Kevin.F
    Commented 20/10/2017 às 15:24
0

Está neste trecho:

var dataBG = {
    labels: [ <?php foreach($class->Lista("BG") as $dados){ echo '"'.$dados->getQtTotalOrigem().'",'; }?> ],
    datasets: [{
        label: "Entregas",
        backgroundColor: window.chartColors.red, <-- Aqui
        borderColor: window.chartColors.red, <-- Aqui
        fontColor:  window.chartColors.red, <!-- Edit 1: Implementação do código. 
        data: [ <?php foreach($class->Lista("BG") as $dados){ echo $dados->getQtTotalDestino().','; }?> ],
        fill: false,            
    }, {
        label: "Efetivas",
        backgroundColor: window.chartColors.blue, <-- Aqui
        borderColor: window.chartColors.blue, <-- Aqui
        data: [ <?php foreach($class->Lista("BG") as $dados){ echo $dados->getQtTotalFinal().','; }?> ],
        fill: false,
    }, {
        label: "Veiculos",
        fill: false,
        backgroundColor: window.chartColors.green, <-- Aqui
        borderColor: window.chartColors.green, <-- Aqui
        data: [ <?php foreach($class->Lista("BG") as $dados){ echo $dados->getQtAtrasadoOrigem().','; }?> ],
    }]

};

Caso queira utilizar uma cor diferente é só utilizar:

backgroundColor: 'rgb(255, 255, 255)',
borderColor: 'rgb(255, 255, 255)',
8
  • Ta mais ai que está, mudei sómente o primeiro e mudou de todos números as cores.
    – Kevin.F
    Commented 19/10/2017 às 16:44
  • Posta a alteração! Commented 19/10/2017 às 16:50
  • Envés de backgroundColor: window.chartColors.red coloquei backgroundColor: window.chartColors.orange e ficou todos laranjas não sómente de uma linha do gráfico.
    – Kevin.F
    Commented 19/10/2017 às 16:55
  • Tenta utilizar o rgb. Commented 19/10/2017 às 17:17
  • Já tentei, acontece a mesma coisa.
    – Kevin.F
    Commented 19/10/2017 às 17:30

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 .