| Protovis | |
|---|---|
| Típusú | JavaScript - könyvtár |
| Fejlesztő | Mike Bostock, Jeff Heer |
| Beírva | JavaScript |
| Operációs rendszer | Többplatformos szoftver |
| legújabb verzió | 3.2 (2010. május 28.) |
| Engedély | BSD |
| Weboldal | protovis.org |
A Protovis egy JavaScript -könyvtár digitális adatok megjelenítésére grafikonok és diagramok formájában. A gráf megjelenése a Prototype -ra és a jQuery -re emlékeztető szintaxissal van leírva . A projekt szerzői, Mike Bostock és Jeff Heer a Stanford Visualization Group tagjai. Lényegében a Protovis a Canvas elemet használja a megjelenítéshez, amely lehetővé teszi a weboldal vizuális elemeinek átlátható beágyazását.
A Protovis egyetlen JavaScript-fájl, amely tartalmazza annak összes deklarációját és funkcióját. A következő kóddal beépíthető egy weboldalba:
< script type = "text/javascript" src = "protovis-r3.1.js" ></ script >A grafikonnak az oldal törzsében való megjelenítéséhez a következőképpen kell hozzáadnia a kódot
< script type = "text/javascript+protovis" > // A Protovis kód ide kerül... </ script >Íme egy példa az egyszerű oszlopdiagram ábrázolásához szükséges kódra:
// Hozza létre a gyökérpanelt, és állítsa be a vizualizáció méretét 150x150-re var vis = new pv . panel () . szélesség ( 150 ) . magasság ( 150 ); // Adjuk hozzá a vízszintes szabályokat (rácsvonalak), először hozzáadjuk őket, így hátul mennek. vis . add ( pv . szabály ) . adatok ( pv . tartomány ( 0 , 2 , .5 )) . alsó ( ( d ) függvény d * 80 + 1 ) . add ( pv . Label ); // Adja hozzá az adattulajdonság értékeinek megfelelő magasságú sávokat vis . add ( pv . Bar ) . adatok ([ 1 , 1.2 , 1.7 , 1.5 , .7 ]) . szélesség ( 20 ) . magasság ( ( d ) függvény 80 * d ) . alsó ( 0 ) . left ( függvény () this . index * 25 + 25 ) // ez. index a nullapont pozíciója a tömbben . horgony ( "alul" ). add ( pv . Label ); // Adjon hozzá egy címkét az egyes sávok aljához // Rendereljen mindent. vis . render ();A Protovis széles körben alkalmazza a metódusláncolást, amely lehetővé teszi, hogy mindössze 4 mondatban írjon példát.