Confesso que tive uma certa dificuldade na manutenibilidade, pois não tinha enxergado de cara como toda operação tinha sido quebrada em várias funções, tendo de refazer muita coisa e dar uma estudade como o instrutor fez para entender a estruturação.
Segue o HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="grafico.css">
<title>Grafico de barras</title>
</head>
<body>
<canvas id="barras" width="600px" height="400px"></canvas>
<div id="browser"></div>
<script src="grafico.js"></script>
</body>
</html>Segue o CSS
li{
display:inline;
font: 20px bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#texto{
margin: 0px;
padding: 0px;
font: 14px bolder;
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#browser{
background-color:lightgray;
position: absolute;
top: 150px;
left: 20px;
}
#Chrome{
color: blue;
}
#Firefox{
color: green;
}
#Safari{
color: yellow;
}
#Outros{
color: red;
}Segue o Javascript
const nav2015 = [50,25,20,5];
const nav2016 = [65,20,13,2];
const colors = ["blue","green","yellow","red"];
const browsers = ["Chrome","Firefox","Safari","Outros"];
const conteudo = document.querySelector("#browser");
function drawRect(x,y,width,height,colors){
const tela = document.querySelector("#barras");
const pincel = tela.getContext("2d");
pincel.fillStyle=colors;
pincel.fillRect(x,y,width,height);
pincel.strokeRect(x,y,width,height);
}
function drawText(x,y,text){
const tela = document.querySelector("#barras");
const pincel = tela.getContext("2d");
pincel.fillStyle="black";
pincel.font="14px Verdana";
pincel.font.weight="bold";
pincel.fillText(text,x,y);
}
function drawTextBrowser(x,y,text){
const tela = document.querySelector("#barras");
const pincel = tela.getContext("2d");
pincel.fillStyle="black";
pincel.font="14px Verdana";
pincel.font.weight="bold";
pincel.fillText(text,x,y);
}
function drawBrowsers(browsers){
conteudo.innerHTML=`<p id="texto"><ul>`;
for(let f=0;f<browsers.length;f++){
conteudo.innerHTML+=`<li id="${browsers[f]}">${browsers[f]} </li>`;
}
conteudo.innerHTML+=`</p></ul>`;
}
function drawGraph(x,y,graphic,colors,browsers,text){
drawText(x+5,y-5,text);
drawBrowsers(browsers);
let sumHeight=0;
for(let i=0;i<graphic.length;i++){
let height = graphic[i];
drawRect(x,y+sumHeight,50,height,colors[i]);
drawTextBrowser(x+60,y+sumHeight+7,browsers[i]);
sumHeight+=height;
}
}
drawGraph(80,20,nav2015,colors,browsers,"2015");
drawGraph(230,20,nav2016,colors,browsers,"2016");
Obs:. Uma coisa que fiquei gastando horas quebrando a cabeça mas infelizmente não consegui arrumar foi o posicionamento no meio de cada barra com o navegador, não consegui visualizar uma forma de fazer com que no FOR pudesse acertar a posição do nome do browser exatamente no meio de cada barra colorida.
