| Protovis | |
|---|---|
| Tipo de | JavaScript - biblioteca |
| Desarrollador | Mike BostockJeff Heer |
| Escrito en | JavaScript |
| Sistema operativo | Software multiplataforma |
| ultima versión | 3.2 (28 de mayo de 2010) |
| Licencia | BSD |
| Sitio web | protovis.org |
Protovis es una biblioteca de JavaScript para visualizar datos digitales en forma de gráficos y tablas. La apariencia del gráfico está escrita con una sintaxis que recuerda a Prototype y jQuery . Los autores del proyecto Mike Bostock y Jeff Heer son miembros del Stanford Visualization Group. En esencia, Protovis utiliza el elemento Canvas para renderizar, lo que le permite incrustar de forma transparente los elementos visuales de una página web.
Protovis es un único archivo JavaScript que contiene todas sus declaraciones y funciones. Se puede incluir en una página web con el siguiente código:
< tipo de secuencia de comandos = "texto/javascript" src = "protovis-r3.1.js" ></ secuencia de comandos >Para mostrar el gráfico en el cuerpo de la página, debe agregar el código de la siguiente manera
< script type = "text/javascript+protovis" > // El código de Protovis va aquí... </ script >Aquí hay un ejemplo del código necesario para trazar un gráfico de barras simple:
// Cree el panel raíz y establezca el tamaño de la visualización en 150x150 var vis = new pv . tablero () . ancho ( 150 ) . altura ( 150 ); // Agregue las reglas horizontales (líneas de cuadrícula), las agregamos primero para que vayan en la parte posterior. Vis . añadir ( pv . Regla ) . datos ( pv . rango ( 0 , 2 , .5 )) . inferior ( función ( d ) d * 80 + 1 ) . añadir ( pv . Etiqueta ); // Agrega las barras con la altura correspondiente a los valores en la propiedad de datos vis . añadir ( pv . Bar ) . datos ([ 1 , 1.2 , 1.7 , 1.5 , .7 ]) . ancho ( 20 ) . altura ( función ( d ) 80 * d ) . inferior ( 0 ) . left ( función () this .index * 25 + 25 ) // this .index es la posición del dato en el arreglo . ancla ( "abajo" ). añadir ( pv . Etiqueta ); // Agrega una etiqueta al final de cada barra // Renderizar todo. Vis . renderizar ();Protovis hace un uso extensivo del encadenamiento de métodos, lo que le permite escribir un ejemplo en solo 4 oraciones.