1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
| /**
* Draw a pie chart into an <svg> element.
* [Tiré de JAVASCRIPT la Référence O'REILLY par David Flanagan]
* Arguments:
* oSvg: the SVG element (or the id of that element) to draw into.
* data: an array of numbers to chart, one for each wedge of the pie.
* cx, cy, r: the center and radius of the pie
* colors: an array of HTML color strings, one for each wedge
* labels: an array of labels to appear in the legend, one for each wedge
* lx, ly: the upper-left corner of the chart legend
*/
function pieChart(canvas, data, cx, cy, r, colors, labels, lx, ly) {
// Locate canvas if specified by id instead of element
if (typeof canvas == "string") canvas = document.getElementById(canvas);
// Add up the data values so we know how big the pie is
var total = 0;
for(var i = 0; i < data.length; i++) total += data[i];
// Now figure out how big each slice of pie is. Angles in radians.
var angles = []
for(var i = 0; i < data.length; i++) angles[i] = data[i]/total*Math.PI*2;
// Loop through each slice of pie.
startangle = 0;
for(var i = 0; i < data.length; i++) {
// This is where the wedge ends
var endangle = startangle + angles[i];
// Compute the two points where our wedge intersects the circle
// These formulas are chosen so that an angle of 0 is at 12 o'clock
// and positive angles increase clockwise.
var x1 = cx + r * Math.sin(startangle);
var y1 = cy - r * Math.cos(startangle);
var x2 = cx + r * Math.sin(endangle);
var y2 = cy - r * Math.cos(endangle);
// This is a flag for angles larger than than a half circle
var big = 0;
if (endangle - startangle > Math.PI) big = 1;
// We describe a wedge with an <svg:path> element
// Notice that we create this with createElementNS()
var path = document.createElementNS(canvas.namespaceURI, "path");
// This string holds the path details
var d = "M " + cx + "," + cy + // Start at circle center
" L " + x1 + "," + y1 + // Draw line to (x1,y1)
" A " + r + "," + r + // Draw an arc of radius r
" 0 " + big + " 1 " + // Arc details...
x2 + "," + y2 + // Arc goes to to (x2,y2)
" Z"; // Close path back to (cx,cy)
// This is an XML element, so all attributes must be set
// with setAttribute(). We can't just use JavaScript properties
path.setAttribute("d", d); // Set this path
path.setAttribute("fill", colors[i]); // Set wedge color
path.setAttribute("stroke", "black"); // Outline wedge in black
path.setAttribute("stroke-width", "2"); // 2 units thick
canvas.appendChild(path); // Add wedge to canvas
// The next wedge begins where this one ends
startangle = endangle;
// Now draw a little matching square for the key
var icon = document.createElementNS(canvas.namespaceURI, "rect");
icon.setAttribute("x", lx); // Position the square
icon.setAttribute("y", ly + 30*i);
icon.setAttribute("width", 20); // Size the square
icon.setAttribute("height", 20);
icon.setAttribute("fill", colors[i]); // Same fill color as wedge
icon.setAttribute("stroke", "black"); // Same outline, too.
icon.setAttribute("stroke-width", "2");
canvas.appendChild(icon); // Add to the canvas
// And add a label to the right of the rectangle
var label = document.createElementNS(canvas.namespaceURI, "text");
label.setAttribute("x", lx + 30); // Position the text
label.setAttribute("y", ly + 30*i + 18);
// Text style attributes could also be set via CSS
label.setAttribute("font-family", "sans-serif");
label.setAttribute("font-size", "16");
// Add a DOM text node to the <svg:text> element
label.appendChild(document.createTextNode(labels[i]));
canvas.appendChild(label); // Add text to the canvas
}
}
/**
* Crée un élément <svg> conforme et remplace un élément de la page avec lui.
* [Par grafik.muzik à gmail point com, 20 juin 2009]
*
* param sIdSubstitut Identifiant (string) de l'élément à remplacer
* param iLargeur Largeur en pixel (integer) du SVG
* param iHauteur Hauteur en pixel (integer) du SVG
* return Élément SVG (object) ajouté dans la page
*/
function creerSvgVide(sIdSubstitut, iLargeur, iHauteur) {
//Récupère le noeud élément (c'est-à-dire la référence vers la balise XHTML) qui sera remplacé par l'élément SVG
var oSubstitut = document.getElementById(sIdSubstitut);
//Créé un élément SVG avec une largeur et une hauteur
var oSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
oSvg.setAttribute("version", "1.1");
oSvg.setAttribute("width", iLargeur);
oSvg.setAttribute("height", iHauteur);
//Place l'élément SVG dans la page XHTML à la place de l'élément substitut
oSubstitut.parentNode.replaceChild(oSvg, oSubstitut);
//Retourne la référence du SVG, afin de s'en servir avec l'autre fonction
return oSvg;
}
//Ne déclenche les fonctions javascript qu'une fois la page chargée complètement
window.addEventListener("load", function() {
//Créer le canvas SVG
var sIdSubstitut = 'conteneur'; //Nom (en fait ID) de l'élément à remplacer par le SVG (le « canvas »)
var iLargeur = '400'; //Largeur du SVG
var iHauteur = '300'; //Hauteur du SVG
var oSvg = creerSvgVide(sIdSubstitut, iLargeur, iHauteur); //Fonction qui crée un SVG
//Afficher un graphique en pointe de tarte dans le SVG
var data = [30, 35, 15]; //Les portions de chaque pointe de tarte
var colors = ['#369', '#c66', '#9c6']; //Les couleurs de chaque pointe (à 3 ou 6 caractères)
var labels = ['Bleu', 'Rouge', 'Vert']; //Le texte des étiquettes associées aux pointes
var cx = iLargeur/2; //Équivaut à 200, centre le graphique horizontalement
var cy = iHauteur/2; //Équivaut à 150, centre le graphique verticalement
var r = 90; //Rayon du graphique
var lx = 15; //position des étiquettes, à partir de la gauche (abscisse x)
var ly = 20; //position des étiquettes, à partir du haut (ordonnée y)
pieChart(oSvg, data, cx, cy, r, colors, labels, lx, ly); //Fonction qui ajoute une pointe de tarte dans le SVG
}, false); |
