Ich möchte ein Säulendiagramm erstellen. Es klappt bis auf die Höhe der Balken.
Die Balken werden bei 100 abgeschnitten. Warum?
Zusatzfrage: Wie könnte ich die y Achse beschriften? Oder geht das nicht?
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
function showBar(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
var values= [66, 77, 88, 99, 111, 85, 70, 90, 50, 105, 120, 75, 83, 110];
var distance = 10;
var maxheight = 140;
var barwidth= 400 /values.length - distance;
for(var i = 0; i < values.length; i++)
{
ctx.fillRect(barwidth * i + distance * i, maxheight - maxheight * values[i] / 100, barwidth, maxheight * values[i] / 100);
}
}
showBar();
</script>
</body>
</html>