Hallo zusammen,
ich hab ein Problem mit meinem Canvas und der Flexbox.
Würde sehr gerne ein paar Kreis-Diagramme auf einer Seite anzeigen. Das ganze sieht in HTML so aus:
Mit JavaScript erzeuge ich die canvas:
Die CSS Klassen sehen wie folgt aus:
Das ganze schaut dann in meinem Browser wie im Dateianhang Unbenannt.png aus.
Wenn ich nun aus der CSS Klasse .column die flex-direction raus nehme sieht es wie gewünscht aus in Unbenannt2.png.
Wieso verhält sich das Canvas so? Also wieso vergrößert es sich obwohl es doch nur width="400" height="250" haben sollte?
Kann mir das vielleicht jemand erklären.
Danke im voraus
ich hab ein Problem mit meinem Canvas und der Flexbox.
Würde sehr gerne ein paar Kreis-Diagramme auf einer Seite anzeigen. Das ganze sieht in HTML so aus:
HTML:
<div class="row">
<div class="column">
<canvas id="test_canvas3" width="400" height="250"></canvas>
</div>
<div class="column">
<canvas id="test_canvas4" width="400" height="250"></canvas>
</div>
</div>
Mit JavaScript erzeuge ich die canvas:
Javascript:
function drawPieChart(data, colors, title, id) {
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
var dataLength = data.length;
var total = 0;
for (var i = 0; i < dataLength; i++) {
total += data[i][1];
}
var x = 100;
var y = 100;
var radius = 100;
var startingPoint = 0;
for (var i = 0; i < dataLength; i++) {
var percent = data[i][1] * 100 / total;
var endPoint = startingPoint + (2 / 100 * percent);
context.beginPath();
context.fillStyle = colors[i];
context.moveTo(x, y);
context.arc(x, y, radius, startingPoint * Math.PI, endPoint * Math.PI);
context.fill();
startingPoint = endPoint;
context.fillStyle = colors[i];
context.fillText(data[i][0] + " (" + data[i][1] + ")", 245, 25 * i + 15);
context.fillStyle = "black";
}
context.font = "20px Arial";
context.textAlign = "center";
context.fillText(title, 100, 225);
}
Die CSS Klassen sehen wie folgt aus:
CSS:
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
}
Das ganze schaut dann in meinem Browser wie im Dateianhang Unbenannt.png aus.
Wenn ich nun aus der CSS Klasse .column die flex-direction raus nehme sieht es wie gewünscht aus in Unbenannt2.png.
Wieso verhält sich das Canvas so? Also wieso vergrößert es sich obwohl es doch nur width="400" height="250" haben sollte?
Kann mir das vielleicht jemand erklären.
Danke im voraus