Chart with Canvas

Asked

Viewed 678 times

1

I need to develop the following chart using canvas:inserir a descrição da imagem aqui

But for now I could only draw the lines in black representing x,y. Could someone help us? Follows code made.

1-part 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- part 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;
    }
}
javascript html5 canvas

1 answer

0

you need to fill an array with column values and draw the rectangles.

<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();

Browser other questions tagged javascript html5 canvas

You are not signed in. Login or sign up in order to post.