Diagramme circulaire, diagramme en secteur circulaire, camembert avec l'élément CANVAS de l'API HTML 5

Le 28 Mars 2011

Représentation graphique d'un diagramme circulaire, ou diagramme en secteur ou diagramme en camembert

Dans le même esprit que l'article précédent: cette fois-ci, on représente une série statistique à l'aide d'un diagramme circulaire.

Rappel: compatible avec la dernière version de Firefox, Chrome, Safari, Opera et Internet Explorer 9.

Série statistique

On crée un tableau de 6 valeurs à une dimension. Notre camembert ne doit pas dépasser le cadre du canvas et de plus on voudrait afficher à droite de celui-ci une légende.

// donnees en pourcentage
var donnees = [1,4,11,21,37,26];
				
var diametre = Math.min(canvas.height, canvas.width) - 100;
var rayon = diametre / 2;
				
// position du centre du camembert
var position_x = rayon + 20;
var position_y = canvas.height / 2 + 20;

Camembert

Pour représenter le diagramme, on convertit nos données en degré en faisant l'équivalence 100 % = 360 degré. Aussi on convertit les angles degré en radian (π = 180 degré). La fonction DessinerAngle dessine une portion du secteur circulaire en fonction du centre du camembert ou disque, du rayon, de la couleur associé à la donnée, de l'angle initial et l'angle final.

function DessinerAngle(context,position_x,position_y,rayon,angle_initial,angles_degre,couleurs) {
	context.beginPath();
	context.fillStyle  = couleurs;
	var angle_initial_radian = angle_initial / (180 / Math.PI);// conversion angle en degré -> angle en radian
	var angles_radian = angles_degre / (180 / Math.PI);// conversion angle en degré -> angle en radian
	context.arc(position_x,position_y,rayon,angle_initial_radian,angle_initial_radian + angles_radian,0);
	context.lineTo(position_x, position_y);
	context.closePath();
	context.fill();
}

var nb_donnees = donnees.length;
var angle_initial = 0;
var stylecolors = ['fuchsia', 'orange', 'tan', 'rgb(0,0,255)', 'rgb(0,255,0)', 'rgb(255,0,0)'];

for(var i=0;i<nb_donnees; i++) {
	var angles_degre = (donnees[i] / 100) * 360;// conversion pourcentage -> angle en degré
	DessinerAngle(context,position_x,position_y,rayon,angle_initial,angles_degre,stylecolors[i]);
	angle_initial += angles_degre;
}

Légende

On dessine à droite du diagramme une légende composé d'un rectangle coloré, d'un petit texte descriptif et de la donnée statistique.

function DessinerRectangle(context,x0,y0,xl,yl,coloration) {
	context.beginPath();
	context.fillStyle = coloration;
	context.fillRect(x0,y0,xl,yl);
	context.closePath();
	context.fill();
}

var largeur_rect = 15;
var legendes = ['10 minutes','30 minutes','50 minutes','60 minutes','90 minutes','120 minutes'];

for(i=0;i<minutes.length;i++) {
	DessinerRectangle(
		context,
		diametre + 30,
		(largeur_rect + 3) * (i + 1),
		largeur_rect,largeur_rect,
		stylecolors[i]
	);
	context.font = '9pt Tahoma';//legendes
	context.fillStyle = '#000';//legendes
	context.fillText(legendes[i] + ', ' + donnees[i] +' %',diametre + 55,18 * i+30);//legendes
}
context.fillText('La semaine',diametre+50,150);

Des questions ? N'hésitez pas.

Références

https://developer.mozilla.org/en/drawing_text_using_a_canvas
https://developer.mozilla.org/en/HTML/Canvas

Autres articles à lire

Diagramme rectangulaire, diagramme en bâtons, histogramme avec l'élément CANVAS de l'API HTML 5
CANVAS API HTML 5 : Dessiner, animer, créer des graphiques, des images

Twitter

Blog