<!DOCTYPE html>
<html lang="en">
<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" />
<title>Document</title>
</head>
<body>
<h2 style="font-family: 'jetbrains mono'">Comparativo 2015 e 2016</h2>
<canvas
style="border-radius: 8px"
id="drawArea"
width="600"
height="400"
>
</canvas>
<script>
var drawArea = document.querySelector("#drawArea");
var brushTool = drawArea.getContext("2d");
brushTool.fillStyle = "lightgrey";
brushTool.fillRect(0, 0, 600, 400);
var colorBrowser = ["blue", "green", "yellow", "red"];
var percentual2015 = [50, 25, 20, 5];
var percentual2016 = [65, 20, 13, 2];
function drawText(year, xAxie, yAxie) {
brushTool.font = "15px jetbrains mono ";
brushTool.fillStyle = "black";
brushTool.fillText(year, xAxie, yAxie);
}
function drawBar(xAxie, yAxie, percent, color, year) {
var xA = xAxie;
var yA = yAxie;
var percents = [];
percents = percent;
var colors = [];
colors = color;
drawText(year, xA, yA);
yA = yA + 10;
for (var n = 0; n < percents.length; n++) {
console.log(percents[n]);
console.log(colors[n]);
brushTool.fillStyle = colors[n];
brushTool.fillRect(xA, yA, 37, percents[n]);
yA = yA + percents[n];
}
}
drawBar(50, 50, percentual2015, colorBrowser, "2015");
drawBar(100, 50, percentual2016, colorBrowser, "2016");
</script>
</body>
</html>
