I need to develop the following graph using canvas:
But for now I only managed to draw the black lines representing x, y. Could someone help? Here's the code done.
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;
}
}