Código de JavaScript - Gráfico de pastel con cavas en HTML5

Imágen de perfil

Gráfico de pastel con cavas en HTML5gráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 17 de Julio del 2017 por xve
4.219 visualizaciones desde el 17 de Julio del 2017. Una media de 63 por semana
En este código he creado una clase de javascript para generar gráficas de pastel

grafico-pastel


Se puede definir si se desea en formato "donut", si mostramos el tanto por ciento y si mostramos la leyenda.

Versión 1.0
estrellaestrellaestrellaestrellaestrella(4)

Actualizado el 29 de Octubre del 2017 (Publicado el 17 de Julio del 2017)gráfica de visualizaciones de la versión: Versión 1.0
4.220 visualizaciones desde el 17 de Julio del 2017. Una media de 63 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<html>
<head>
	<meta charset="utf-8">
	<title>gráfico de pastel con cavas en HTML5</title>
 
	<style>
	.leyendaH {text-align:center;}
	.leyenda  ul {list-style-type:none;padding:0 10px;}
	.leyendaH ul {display:inline-block;}
	.leyenda  ul>li {font-size:14px;}
	.leyendaH ul>li {float:left;margin-right:10px;}
	.leyenda  ul>li>span {width:12px;height:12px;display:inline-block;margin-right:3px;}
	</style>
</head>
 
<body>
<div style="float:left;margin-right:50px;">
	<canvas id="canvas1"></canvas>
	<div id="leyenda1" class="leyenda"></div>
</div>
 
<div style="float:left;">
	<canvas id="canvas2"></canvas>
	<div id="leyenda2" class="leyenda leyendaH"></div>
</div>
 
<script>
/**
 * Clase para generar graficos de pastel
 * Tiene que recibir:
 *	el id del canvas
 *	la anchura y altura del canvas
 *	un array con los valores a mostrar del tipo:
 *		var valores={
 *			"Access":	{valor:10,color:"blue"},
 *			"PHP":		{valor:23,color:"red"},
 *			"Python":	{valor:18,color:"green"},
 *			".NET":		{valor:12,color:"Orange"},
 *			"C++":		{valor:30,color:"Cyan"}
 *		}
 */
var miPastel=function(canvasId,width,height,valores) {
	this.canvas=document.getElementById(canvasId);;
	this.canvas.width=width;
	this.canvas.height=height;
	this.radio=Math.min(this.canvas.width/2,this.canvas.height/2)
	this.context=this.canvas.getContext("2d");
	this.valores=valores;
	this.tamanoDonut=0;
 
	/**
	 * Dibuja un gráfico de pastel
	 */
	this.dibujar=function() {
		this.total=this.getTotal();
		var valor=0;
		var inicioAngulo=0;
		var angulo=0;
 
		// creamos los quesos del pastel
		for(var i in this.valores)
		{
			valor=valores[i]["valor"];
			color=valores[i]["color"];
			angulo=2*Math.PI*valor/this.total;
 
			this.context.fillStyle=color;
			this.context.beginPath();
			this.context.moveTo(this.canvas.width/2, this.canvas.height/2);
			this.context.arc(this.canvas.width/2, this.canvas.height/2, this.radio, inicioAngulo, (inicioAngulo+angulo));
			this.context.closePath();
			this.context.fill();
			inicioAngulo+=angulo;
		}
	}
 
	/**
	 * Dibuja un gráfico de pastel con una redonda en medio en modo de donut
	 * Tiene que recibir:
	 *	el tamaño de la redonda central (0 no hay redonda - 1 es todo)
	 *	el color de la redonda
	 */
	this.dibujarDonut=function(tamano,color) {
		this.tamanoDonut=tamano;
		this.dibujar();
 
		// creamos un circulo del color recibido en medio
		this.context.fillStyle=color;
		this.context.beginPath();
		this.context.moveTo(this.canvas.width/2, this.canvas.height/2);
		this.context.arc(this.canvas.width/2, this.canvas.height/2, this.radio*tamano, 0, 2*Math.PI);
		this.context.closePath();
		this.context.fill();
	}
 
	/**
	 * Pone el tanto por ciento de cada uno de los valores
	 * Tiene que recibir:
	 *	el color del texto
	 */
	this.ponerPorCiento=function(color){
		var valor=0;
		var etiquetaX=0;
		var etiquetaY=0;
		var inicioAngulo=0;
		var angulo=0;
		var texto="";
		var incrementar=0;
 
		// si hemos dibujado un donut, tenemos que incrementar el valor del radio
		// para que quede centrado
		if(this.tamanoDonut)
			incrementar=(this.radio*this.tamanoDonut)/2;
 
		this.context.font="bold 12pt Calibri";
		this.context.fillStyle=color;
		for(var i in this.valores)
		{
			valor=valores[i]["valor"];
			angulo=2*Math.PI*valor/this.total;
 
			// calculamos la posición del texto
			etiquetaX=this.canvas.width/2+(incrementar+this.radio/2)*Math.cos(inicioAngulo+angulo/2);
			etiquetaY=this.canvas.height/2+(incrementar+this.radio/2)*Math.sin(inicioAngulo+angulo/2);
 
			texto=Math.round(100*valor/this.total);
 
			// movemos la posición unos pixels si estamos en la parte izquierda
			// del pastel para que quede mas centrado
			if(etiquetaX<this.canvas.width/2)
				etiquetaX-=10;
 
			// ponemos los valores
			this.context.beginPath();
			this.context.fillText(texto+"%", etiquetaX, etiquetaY);
			this.context.stroke();
 
			inicioAngulo+=angulo;
		}
	}
 
	/**
	 * Function que devuelve la suma del total de los valores recibidos en el array
	 */
	this.getTotal=function() {
		var total=0;
		for(var i in this.valores)
		{
			total+=valores[i]["valor"];
		}
		return total;
	}
 
	/**
	 * Función que devuelve una lista (<ul><li>) con la leyenda
	 * Tiene que recibir el id donde poner la leyenda
	 */
	this.ponerLeyenda=function(leyendaId) {
		var codigoHTML="<ul class='leyenda'>";
 
		for(var i in this.valores)
		{
			codigoHTML+="<li><span style='background-color:"+valores[i]["color"]+"'></span>"+i+"</li>";
		}
		codigoHTML+="</ul>";
		document.getElementById(leyendaId).innerHTML=codigoHTML;
	}
}
 
// definimos los valores de nuestra gráfica
var valores={
	"Access":{valor:10,color:"blue"},
	"PHP":{valor:23,color:"red"},
	"Python":{valor:18,color:"green"},
	".NET":{valor:12,color:"Orange"},
	"C++":{valor:30,color:"Cyan"}
}
 
// generamos el primer pastel
var pastel=new miPastel("canvas1",300,300,valores);
pastel.dibujar();
pastel.ponerPorCiento("white");
pastel.ponerLeyenda("leyenda1");
 
// generamos el segundo pastel
var pastel=new miPastel("canvas2",300,300,valores);
pastel.dibujarDonut(0.5,"white");
pastel.ponerPorCiento("white");
pastel.ponerLeyenda("leyenda2");
</script>
 
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (4)

Imágen de perfil
kip
17 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
miguel
29 de Octubre del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
Enmanuel
28 de Febrero del 2018
estrellaestrellaestrellaestrellaestrella
Está muy bueno, te lo agradezco.
Responder
erick
07 de Mayo del 2018
estrellaestrellaestrellaestrellaestrella
muy buen post hermnao
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4071  
Revisar política de publicidad