Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Gráfico OK, porém COR da legenda não operacional

<canvas width="600" height="400"></canvas>
<script>
    function desenhaRetangulo(x, y, largura, altura, cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.fillStyle=cor;
        pincel.fillRect(x,y, largura, altura);
        pincel.strokeStyle='black';
        pincel.strokeRect(x,y, largura, altura);
    }
    function desenhaTexto(x, y, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.font='15px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }
        // Séries
var serie2015 = [50, 25, 20, 5];  //Graf I
var serie2016 = [65, 20, 13, 2];  //Graf II
var serie2023 = [80, 8, 6, 4, 1];  //Graf II
var cores = ['blue', 'green', 'yellow', 'red'];
var legenda = ['Chrome','Firefox','Safari','Outros'];
//------------------------------------------------------
     function desenhaBarra(x, y, serie, cores, texto) {// aqui precisamos desenhar vários retângulos!
        //   x e y=posição inicial   cores<---cores(contar)     texto=vem na chamada da função
        var yGraf=y+20; //Altura inicial do gráfico.  O texto ficará na posição da chamada
        var largura = 50; var altura = serie[0] ; 
        desenhaTexto (x+5,y,texto);
        for (contar=0; contar<4; contar++) {
         //para chamar: function desenhaRetangulo(x, y, largura, altura, cor)
         //Ex.:  desenhaBarra(50, 50, serie2015, cores, '2015');
                altura = serie[contar];
                desenhaRetangulo(x,yGraf,largura,altura,cores[contar]);
                yGraf=yGraf+serie[contar];
                //altura=altura+serie[contar];
        } 
    }  
//Melhoria no texto
function legendaTextoCor(x, y, texto2, cor2) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.font='20px Georgia';
        pincel.fillStyle="cor2";
        pincel.fillText(texto2, x, y);    
}
var h = 33;  //Espaço entre as linhas da legenda
for (contar=0; contar<4; contar++) {
        //legendaTextoCor (350, 70+h*contar,legenda[contar],cores[contar]);                    COR não funciona
        //legendaTextoCor (350, 70+h*contar,legenda[contar],"cores[contar]");                COR não funciona
        legendaTextoCor (350, 70+h*contar,legenda[contar],"red");                                        //COR  red  ou qualquer outra não funciona
}
desenhaBarra(50, 50, serie2015, cores, '2015');
desenhaBarra(150, 50, serie2016, cores, '2016');
desenhaBarra(250, 50, serie2023, cores, '2023');


</script>
3 respostas
solução!

Alexandre, dentro da função legendaTextoCor() altere a linha abaixo:

pincel.fillStyle="cor2";

para:

pincel.fillStyle=cor2;

Testa aí e nos diga se está alterando a cor da legenda.

Abraços e bons estudos!

<canvas width="600" height="400"></canvas>
<script>
    function desenhaRetangulo(x, y, largura, altura, cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.fillStyle=cor;
        pincel.fillRect(x,y, largura, altura);
        pincel.strokeStyle='black';
        pincel.strokeRect(x,y, largura, altura);
    }
    function desenhaTexto(x, y, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.font='15px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }
        // Séries
var serie2015 = [50, 25, 20, 5];  //Graf I
var serie2016 = [65, 20, 13, 2];  //Graf II
var serie2023 = [80, 8, 6, 4, 1];  //Graf II
var cores = ['blue', 'green', 'yellow', 'red'];
var legenda = ['Chrome','Firefox','Safari','Outros'];
//------------------------------------------------------
     function desenhaBarra(x, y, serie, cores, texto) {// aqui precisamos desenhar vários retângulos!
        //   x e y=posição inicial   cores<---cores(contar)     texto=vem na chamada da função
        var yGraf=y+20; //Altura inicial do gráfico.  O texto ficará na posição da chamada
        var largura = 50; var altura = serie[0] ; 
        desenhaTexto (x+5,y,texto);
        for (contar=0; contar<4; contar++) {
         //para chamar: function desenhaRetangulo(x, y, largura, altura, cor)
         //Ex.:  desenhaBarra(50, 50, serie2015, cores, '2015');
                altura = serie[contar];
                desenhaRetangulo(x,yGraf,largura,altura,cores[contar]);
                yGraf=yGraf+serie[contar];
                //altura=altura+serie[contar];
        } 
    }  
//Melhoria no texto
function legendaTextoCor(x, y, texto2, cor2) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.font='20px Georgia';
        pincel.fillStyle=cor2;
        pincel.fillText(texto2, x, y);    
}
var h = 33;  //Espaço entre as linhas da legenda
for (contar=0; contar<4; contar++) {
        legendaTextoCor (350, 70+h*contar,legenda[contar],cores[contar]); 
}
desenhaBarra(50, 50, serie2015, cores, '2015');
desenhaBarra(150, 50, serie2016, cores, '2016');
desenhaBarra(250, 50, serie2023, cores, '2023');


</script>

Maravilha, André! Obrigado por essa! Completo agora.

Att