1

Estou precisando desenvolver o seguinte gráfico utilizando canvas:inserir a descrição da imagem aqui

Porém por enquanto so consegui desenhar as retas em preto representando o x,y. Alguém poderia dar uma ajuda? Segue código feito.

1-parte html

<!DOCTYPE html>
<html>
<head>
    <title>Começando a desenhar o gráfico</title>
    <meta charset="utf-8">
    <script src="grafico.js"></script>
</head>
<body>
<canvas id="canvas_grafico" width="500" height="500">
</canvas>
<script>
    var canvas = document.getElementById('canvas_grafico');
    var context = canvas.getContext('2d');

    //Criando nosso gráfico
    // O canto superior do gráfico deverá ficar na posição (10,10)
    // O eixo X terá 400 pixels de largura
    // O eixo Y terá 300 pixels de altura
    var grafico = new Grafico(context,20,20,400,300);


    var valores = [823, 231, 345, 500, 200, 850, 357, 699];
    grafico.colunas(valores);

    //Iremos desenhar os eixos
    // grafico.desenhaEixos();


</script>
</body>
</html>

2- parte js

// arquivo: grafico.js
function Grafico(context, x, y, tamanhoX, tamanhoY) {
    //Contexto necessário para desenhar no canvas
    this.context = context;
    //Posição x e y onde o gráfico será desenhado
    this.x = x;
    this.y = y;
    //Tamanho do eixo X
    this.tamanhoX = tamanhoX;
    //Tamanho do eixo Y
    this.tamanhoY = tamanhoY;

}
Grafico.prototype = {
    //Método responsável por desenhar o eixo X
    desenhaEixoX: function() {
        this.context.strokeStyle = "black"; 
        this.context.lineWidth = 3;
        this.context.lineCap = "round";
        this.context.beginPath();
        this.context.moveTo(this.x,this.y+this.tamanhoY );
        this.context.lineTo(this.x+this.tamanhoX,this.y+this.tamanhoY );
        this.context.stroke();

    },
    //Método responsável por desenhar o eixo y
    desenhaEixoY: function() {
        this.context.strokeStyle = "black";
        this.context.lineWidth = 3;
        this.context.lineCap = "round";
        this.context.beginPath();
        this.context.moveTo(this.x,this.y );
        this.context.lineTo(this.x,this.y+this.tamanhoY );
        this.context.stroke();

    },
    //Método responsável por desenhar os dois eixos
    desenhaEixos: function() {
       this.desenhaEixoX();
       this.desenhaEixoY();
    },
    //Função para fazer as colunas
    colunas: function(valores){


        }



    },
    //Retorna o código de uma cor aleatória
    corRandomica: function() {
        var letras = '0123456789ABCDEF'.split('');
        var cor = '#';
        for (var i = 0; i < 6; i++ ) {
            cor += letras[Math.floor(Math.random() * 16)];
        }
        return cor;
    }
}

2 Respostas 2

0

é preciso preencher um array com os valores das colunas e desenhar os rectângulos.

<canvas id="canvas_grafico" width="500" height="500">
</canvas>

// arquivo: grafico.js
function Grafico(context, x, y, tamanhoX, tamanhoY) {
   //Contexto necessário para desenhar no canvas
   this.context = context;
    //Posição x e y onde o gráfico será desenhado
    this.x = x;
    this.y = y;
    //Tamanho do eixo X
    this.tamanhoX = tamanhoX;
    //Tamanho do eixo Y
    this.tamanhoY = tamanhoY;
    this.colunas = [];

}
Grafico.prototype = {
    //Método responsável por desenhar o eixo X
    desenhaEixoX: function() {
        this.context.strokeStyle = "black"; 
        this.context.lineWidth = 3;
        this.context.lineCap = "round";
        this.context.beginPath();
        this.context.moveTo(this.x,this.y+this.tamanhoY );
        this.context.lineTo(this.x+this.tamanhoX,this.y+this.tamanhoY );
        this.context.stroke();

    },
    //Método responsável por desenhar o eixo y
    desenhaEixoY: function() {
        this.context.strokeStyle = "black";
        this.context.lineWidth = 3;
        this.context.lineCap = "round";
        this.context.beginPath();
        this.context.moveTo(this.x,this.y );
        this.context.lineTo(this.x,this.y+this.tamanhoY );
        this.context.stroke();

     },
     //Método responsável por desenhar os dois eixos
     desenhaEixos: function() {
         this.desenhaEixoX();
         this.desenhaEixoY();
     },
     desenhaColunas: function() {
         var x = 0;
         var total_colunas = this.colunas.length;
         var w = this.tamanhoX / total_colunas;
         for (var i in this.colunas) {
             var val = this.colunas[i];
             var color = this.corRandomica();
             this.context.fillStyle = color;
             this.context.fillRect(x,this.tamanhoY - val,w,val);
             x += w;
         }
     },
     setColunas: function(valores){
         for (var i in valores) {
             this.colunas.push(valores[i] * this.tamanhoY / 1000);
         }
     },
     //Retorna o código de uma cor aleatória
     corRandomica: function() {
         var letras = '0123456789ABCDEF'.split('');
         var cor = '#';
         for (var i = 0; i < 6; i++ ) {
              cor += letras[Math.floor(Math.random() * 16)];
         }
         return cor;
     }
 }

 var canvas = document.getElementById('canvas_grafico');
 var context = canvas.getContext('2d');

 //Criando nosso gráfico
 var grafico = new Grafico(context,0,0,500,500);

 var valores = [823, 231, 345, 500, 200, 850, 357, 699];
 grafico.setColunas(valores);
 grafico.desenhaColunas();
 grafico.desenhaEixos();
-1

Você pode optar por usar o fillRect(left, top, width, height) em vez de lineTo.

let canvas = document.querySelector('.graphic-one')
let container = document.querySelector('.cont-canvas')

let [labelSize, labelText, newLabel, labelHalf,
     barWidth, barWidthRaw, barHeight, barTop, barLeft, barHalf,
     gap,canvasWidth, canvasHeight, maxValue, divisor,
     index
    ] = [];

let dados = [300, 231, 305, 435, 730]
let colors = ['blueviolet', 'chocolate', 'blue', 'green', 'brown', 'red']
let labels = ["Label1", "Label2", "Label3", "Label5", "Label5", "Label6"]
let arrLength = dados.length;
let draw = canvas.getContext("2d");

/**Funão auto-executável */
;(function barrasSet(){

    canvasWidth = canvas.offsetWidth;
    canvasHeight = canvas.offsetHeight;

    barWidthRaw = canvasWidth / arrLength;
    /**Width da barra sem considerar o gap */

    barHalf = barWidthRaw / 2;
    /**50% da largura da barra */ 

    barWidth = barHalf + (barHalf / 2);
    /**Width de cada barra*/ 

    gap = barHalf * 1.9; 
    /**Distância entre uma barra e outra */

    barLeft = barHalf / 2;
    /**Left de cada barra */

    maxValue = Math.max(...dados); 
    /**Maior número do array */

    divisor = (1,11/1000) * maxValue; 
    /**1,11% de maxValue */

})();


/**Funão auto-executável */
;(function desenhaBarras(){

    dados.forEach(element => {

        index = dados.indexOf(element)/**Índece do elemento */

        barHeight = (element/100) * canvasHeight / divisor; /**Altura de cada barra */
        barTop = canvasHeight - barHeight; /**Distância do Topo */

        /**Desenha a Barra */
        draw.fillStyle = colors[index]
        draw.fillRect(barLeft, barTop, barWidth, barHeight); /**left, top, width, height */

        /**Criando a Label de cada barra */
        labelSize = 15
        labelText = labels[index]

        newLabel = document.createElement('span')
            newLabel.textContent = labelText
            newLabel.style.fontSize = `${labelSize}px`
        container.appendChild(newLabel)

        /**Pega a width da label */
        labelHalf = newLabel.offsetWidth / 2 
        container.removeChild(newLabel)

        /**Desenha a label e a posiciona*/
        draw.font =`${labelSize}px Arial`;
        draw.fillText(labelText, barLeft + (barWidth / 2) - labelHalf , barTop - 5 ) /**Texto, left, top */

        barLeft += gap;
    })
    
})();
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>Gráficos</title>
</head>
<body>
    <main class="container">
        <div class="cont-canvas">
            <canvas class="graphic-one" width="600" height="300" style="background: rgb(211, 211, 211)">
                Navegador sem suporte para Canvas.
            </canvas>
        </div>
    </main>
    <script src="js/script.js"></script>
</body>
</html>

1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    8/03/2023 às 19:47

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 .