Ya sé que debería esperar un poco más para postear este mensaje. Pero creo que
sinyei no va a volver a explicar nada. Una pena, porque no hubiese estado mal que dijera "
¡Uy, me equivoqué de mensaje y la respuesta era para otro!" (le creería, porque a mí me pasa seguido), o simplemente "
No me fijé en las fechas...", qué sé yo, algo.
Aprovecho para explicar a quien no se haya dado cuenta , que esa "clase" que le falta es en realidad un escript; lo único que podía servir aquí ... y no lo publicó.
Supongo que no era más que un programa para 'dibujar' la torta con SVG, VML o
canvas, según correspondiese. Y que ni siquiera lo había escrito él.
El ejemplo que puse en el mensaje
#5 hace justamente eso, pero solamente con VML para
Internet Explorer, porque se me ocurrió aprovechar los
arc y no lo había visto en otro lado.
Para todos los demás navegadores se puede usar
canvas, y para justificar que se haya levantaron el tema, me puse a trabajar en un ejemplo ... y como de costumbre, después de escribir el esqueleto, pensé que a estas alturas alguien ya lo debía haber hecho ¡si
sinyei dice que tiene uno!.
Empecé a buscar y de todos los que encontré me quedé con éste
http://www.phpied.com/canvas-pie/
El ejemplo captura las porciones directamente de una tabla, lo que me parece práctico porque generalmente los gráficos se sacan de una tabla.
Lo que no me gustó es que usa colores aleatorios. Se supone que debe tomar los colores de una paleta que elegimos nosotros, para que —p.e.— si mostramos todos los meses año por año, a un mismo mes le corresponda un mismo color.
No creo que al autor le moleste, porque más que el crédito, estoy poniendo un enlace; así que me tomé el atrevimiento de cambiar ese detalle en esta versión.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Canvas donut</title>
<style type="text/css">
* {font-family: Arial;}
table {margin-left: 10px; font-weight: 900;}
td{padding: 5px;}
canvas{float: left; background-color: white;}
#lista {background-color: #ffffcc;}
</style>
</head>
<body>
<h2>Gráfico de Rosca. (Op, FF, Chr)</h2>
<canvas id="canvas" width="300" height="300"></canvas>
<table id="mydata">
<tr> <th>Lang</th><th>Value</th> </tr>
<tr><td id="lista">JavaScript</td> <td>100</td> </tr>
<tr><td id="lista"> CSS</td> <td>200</td> </tr>
<tr><td id="lista"> HTML</td> <td>300</td> </tr>
<tr><td id="lista"> PHP</td> <td> 50</td> </tr>
<tr><td id="lista"> MySQL</td> <td> 30</td> </tr>
<tr><td id="lista">Apache</td> <td> 10</td> </tr>
<tr><td id="lista"> Linux</td> <td> 30</td> </tr>
</table>
<script type="text/javascript">
var center, radius;
window.onload = function() {
(function() {
var data_table = document.getElementById('mydata');
var canvas = document.getElementById('canvas');
var td_index = 1;
var tds, data = [], color, colors = [], value = 0, total = 0;
var trs = data_table.getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
tds = trs[i].getElementsByTagName('td');
if (tds.length === 0) continue;
value = parseFloat(tds[td_index].innerHTML);
data[data.length] = value;
total += value;
color = getColor();
colors[colors.length] = color;
trs[i].style.backgroundColor = color;
}
if (typeof canvas.getContext === 'undefined') {
return;
}
var ctx = canvas.getContext('2d');
var canvas_size = [canvas.width, canvas.height];
radius = Math.min(canvas_size[0], canvas_size[1]) / 2;
center = [canvas_size[0]/2, canvas_size[1]/2];
var sofar = 0;
for (var piece in data) {
var thisvalue = data[piece] / total;
ctx.beginPath();
ctx.moveTo(center[0], center[1]);
ctx.arc(
center[0],
center[1],
radius,
Math.PI * (- 0.5 + 2 * sofar),
Math.PI * (- 0.5 + 2 * (sofar + thisvalue)),
false
);
ctx.lineTo(center[0], center[1]);
ctx.closePath();
ctx.fillStyle = colors[piece];
ctx.fill();
sofar += thisvalue;
}
function getColor() {
var clr = paleta.shift()
return clr;
}
ujero(ctx);
})()
function ujero(ctx) {
ctx.beginPath();
ctx.arc(center[0],center[1],radius/3,0,7, false);
ctx.fillStyle = "white";
ctx.fill();
}
}
var paleta = ["red", "fuchsia", "lime", "green", "blue", "aqua", "yellow", "olive","teal", "navy", "silver", "maroon", "purple", "gray"]
</script>
</body>
</html>
Y por supuesto, también lo convertí de "torta" a "rosca"
.
Una duda. ¿es realmente tan difícil pasar variables JS con PHP? A menos que no las pase, entonces quizá haya que terminar en AJAX, porque con javascript directamente no creo que se pueda leer una base en un servidor ¿no?.
http://www.downloadjavascripts.com/l...5/Details.aspx
[edit]
Un detalle del ejemplo con VML : para que hoy funcione hay que reemplezar el DT
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
por
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Lo iba a cambiar ahí mismo, que es lo que corresponde para que nadie tenga que buscar los 'parches' de actualización por todo el tema, pero por alguna razón el editor no me deja.
[/edit]