201212Sep

BonsaiJS: Kompakte Bibliothek für Graphen und mehr

Wenn es um die Visualisierung von Daten im Webbrowser geht, helfen Bibliotheken wie Raphaël aus. Für komplexere Graphen und Auswertungen eignet sich eine Lösung wie Highcharts. Wer eine etwas kompaktere Variante mit weniger Features bevorzugt, kann sich aktuell die Bibliothek BonsaiJS ansehen: Dabei handelt es sich ebenfalls um eine JavaScript-Grafikbibliothek, die Elemente per SVG darstellt und eine entsprechende API bietet.

BonsaiJS - A lightweight graphics library with an intuitive graphics API and an SVG renderer

BonsaiJS orientiert sich ein wenig an Flash bzw. ActionScript: Elemente werden einer Bühne (Stage) hinzugefügt und alles, was auf der Bühne dargestellt werden kann, stammt von der Klasse "DisplayObject" ab. Wie BonsaiJS-Animationen aussehen können, zeigen verschiedene Demos. Ein Beispiel-Snippet für BonsaiJS-Code:

  • var r = new Rect(0, 0, 100, 200).addTo(stage);
  • r.fill('blue');
  •  
  • // Animation:
  • r.animate('400ms', {
  • x: 50,
  • y: 50,
  • width: 200
  • });

BonsaiJS bietet trotz seiner Kompaktheit Features wie Keyframe-Animationen, Pfade, Morphing, Assets (Videos, Bilder, Schriftarten) und vieles mehr. Die Bibliothek steht bei GitHub zum Download bereit.