Bom exercício que faz pensar e usar bastante conceitos. Implementei a legenda com as cores e os percentuais abaixo.
<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
var serie2015 = [50,25,20,5];
var serie2016 = [65,20,13,2];
var cores = ["blue","green","yellow","red"];
var navegadores = ["Chrome", "Firefox", "Safari", "Outros"];
function desenhaGrafico(x, y, serie, cores, texto){
for(var a = 0; a < serie.length; a++){
if(a == 0) {
escreveTexto(x, y, texto);
}
pincel.fillStyle = cores[a];
pincel.fillRect(x,y,50,serie[a]);
pincel.strokeStyle = "black";
pincel.strokeRect(x,y,50,serie[a]);
y = y + serie[a];
}
}
function escreveTexto(x, y, texto){
pincel.font = "15px Arial";
pincel.fillStyle = "black";
pincel.fillText(texto, x, y - 10);
}
function escreveLegenda(x, y, texto){
pincel.font = "15px Arial";
pincel.fillStyle = "black";
pincel.fillText(texto, x, y);
}
function escrevePercentuais(serie, texto){
document.write("<br>Em " + texto + ": ");
for(var a = 0;a <= 3;a++){
document.write(" " + serie[a] +"% " + navegadores[a] + " /// ");
}
document.write("<br>");
}
function desenhaLegenda(x, y, cores, navegadores){
for(var a = 0; a < cores.length; a++){
pincel.fillStyle = cores[a];
pincel.fillRect(x, y, 20, 20);
pincel.fillStroke = "black";
pincel.strokeRect(x, y, 20, 20);
escreveLegenda(x + 25, y + 15, navegadores[a]);
x = x + 100;
}
}
desenhaGrafico(50, 50, serie2015, cores, "2015");
desenhaGrafico(250, 50, serie2016, cores, "2016");
escrevePercentuais(serie2015, "2015");
escrevePercentuais(serie2016, "2016");
desenhaLegenda(50, 200, cores, navegadores);
</script>
