<meta charset="utf-8">
<canvas width="600" height="400"></canvas>
<script type="text/javascript">
function desenhaquadrado(x , y , altura , largura , corFundo , corBorda)
{
if(corBorda == "")
{
pincel.fillStyle = corFundo;
pincel.fillRect(x , y , altura , largura);
}
if(corFundo == "")
{
pincel.strokeStyle = corBorda;
pincel.strokeRect(x , y , altura , largura);
}
else
{
pincel.fillStyle = corFundo;
pincel.fillRect(x , y , altura , largura);
pincel.strokeStyle = corBorda;
pincel.strokeRect(x , y , altura , largura);
}
}
function desenhatexto(texto , x , y , fonte , tamFonte , cor)
{
pincel.font = tamFonte + "px " + fonte;
pincel.fillStyle = cor;
pincel.fillText(texto , x , y);
}
function desenhacirculo(x , y , raio , corFundo , corBorda)
{
if(corBorda == "")
{
pincel.fillStyle = corFundo;
pincel.beginPath();
pincel.arc(x , y , raio , 0 , 2 * 3.14);
pincel.fill();
}
if(corFundo == "")
{
pincel.strokeStyle = corBorda;
pincel.beginPath();
pincel.arc(x , y , raio , 0 , 2 * 3.14);
pincel.stroke();
}
else
{
pincel.fillStyle = corFundo;
pincel.strokeStyle = corBorda;
pincel.beginPath();
pincel.arc(x , y , raio , 0 , 2 * 3.14);
pincel.fill();
pincel.stroke();
}
}
function desenhagrafico(x , y , serie , cores , texto)
{
desenhatexto(texto , x , y - 10 , "Georgia" , 20 , "black");
var alturas = 0;
for(var i = 0; i < serie.lenght; i++)
{
var altura = serie[i];
var cor = cores[i];
desenhaquadrado(x , y + alturas , altura , 50 , cor , "black");
alturas = alturas + altura;
}
}
var canvas = document.querySelector("canvas");
var pincel = canvas.getContext("2d");
var serie2015 = [50, 25, 20, 5];
var serie2016 = [65, 20, 13, 2];
var cores = ["blue", "green", "yellow", "red"];
desenhagrafico(50, 50, serie2015, cores, "2015");
desenhagrafico(150, 50, serie2016, cores, "2016");
</script>