pie-chart canvas | pie-chart javascript | pie-chart html5 | pie-chart css | pie-chart css3 | pie-chart php | pie-chart php met get | pie-chart svg
In alle moderne browsers (inclusief IE vanaf versie 9) werkt deze pie-chart voorbeeldig. Als de bezoekers met hele ouderwetse browsers deze pagina bezoeken, zal de mededeling "upgrade jouw browser voor canvas-support" worden gegeven. Als je er op staat, kan je de excanvas library gebruiken: in de code is er rekening mee gehouden. Maar ik raad je het ten sterkste af. Ten eerste moedig je de bezoekers niet aan om hun browser te moderniseren en ten tweede is de "excanvas" zó "buggy", dat niemand er echt blij van wordt.. Tot slot: Deze hele pagina is minder dan 2㎅; dan is het een beetje raar om een library van 12㎅ "daaraan te hangen".
in het (onderstaande) javascript staan boven in de code drie regels met de variabelen: tekst, diameter_pie en invoer_pie_chart. Voer daar de gewenste data in, en voor de rest gaat alles vol-automatisch. Je kan het script aanpassen naar eigen goed-dunken.
<canvas id="pie_chart">upgrade jouw browser voor canvas-support</canvas>
<script>
/*global document: false */
var tekst = ['44% Explorer', '25% Mozilla', '23% Chrome', '5% Safari', '3% Overigen'];
var diameter_pie = 80;
var invoer_pie_chart = [44, 25, 23, 5, 3];
var G_vmlCanvasManager;
var a, c, sum, x, y, q, i, empty_block;
Array.prototype.sum = function () {
for (i = 0, sum = 0; i < this.length; sum += this[i++]) {
empty_block = 0;
}
return sum;
};
var c = document.getElementById('pie_chart');
if (G_vmlCanvasManager !== undefined) {
G_vmlCanvasManager.initElement(c);
}
if (c.getContext) {
a = c.getContext('2d');
} else {
a = "geen_canvas";
}
function schrijf(x, y, r, u, v) {
r ? a.beginPath() | a.fill(a.moveTo(x, y) | a.arc(x, y, r, (u || 0) / 50 * Math.PI, (v || 7) / 50 * Math.PI, 0) | a.lineTo(x, y)) : a.fillStyle = '#' + '9009057950995a9bac0cc53'.substr(x, 3);
return schrijf;
}
function maak_pie_chart(r) {
if (a === "geen_canvas") {
return;
}
c.width = 3.5 * r;
c.height = 2.5 * r;
x = y = c.height / 2;
a.font = "bold 8pt Arial";
var u = 0;
var v = 0;
for (i = 0; i < invoer_pie_chart.length; i++) {
v += invoer_pie_chart[i];
schrijf(i)(x, y, r, u, v);
u = v;
a.fillText(tekst[i], x + r + 10, y - r / 2 + i * 18);
}
}
var array_geteld = invoer_pie_chart.sum();
var faktor = 100 / array_geteld;
for (q = 0; q < invoer_pie_chart.length; q++) {
invoer_pie_chart[q] = invoer_pie_chart[q] * faktor;
}
var r = diameter_pie;
maak_pie_chart(r);
</script>