Biblioteka wykresów JavaScript

Czy ktoś poleciłby konkretną bibliotekę wykresów JavaScript - szczególnie taką, która w ogóle nie używa Flasha?

Istnieje coraz więcej otwartych i komercyjnych rozwiązań do tworzenia czystych skryptów JavaScript, które nie wymagają Flasha. W tej odpowiedzi przedstawię tylko opcje Open Source.

Istnieją 2 główne klasy rozwiązań JavaScript dla grafiki, które nie wymagają Flasha:

• Oparte na kanwie, renderowane w IE przy użyciu ExplorerCanvas, który z kolei opiera się na VML
• SVG w przeglądarkach standardowych, renderowanych jako VML w IE

Oba podejścia mają wady i zalety, ale dla biblioteki wykresów polecam później, ponieważ jest ona dobrze zintegrowana z DOM, pozwalając na manipulowanie elementami wykresów za pomocą DOM i, co najważniejsze, ustawiając zdarzenia DOM. Z kolei biblioteki wykresów kanwy muszą ponownie wynaleźć koło DOM, aby zarządzać zdarzeniami. Więc jeśli nie zamierzasz budować wykresów statycznych bez obsługi zdarzeń, rozwiązania SVG / VML powinny być lepsze.

W przypadku rozwiązań SVG / VML istnieje wiele opcji, w tym:

• Dojox wykresów , dobre, jeśli używasz zestawu narzędzi Dojo już
• Rozwiązania oparte na Raphaelu

Raphael to bardzo aktywna, dobrze utrzymana i dojrzała biblioteka graficzna typu open source z bardzo dobrą obsługą przeglądarek, w tym IE 6 do 8, Firefox, Opera, Safari, Chrome i Konqueror. Raphael nie zależy od żadnej struktury JavaScript i dlatego może być używany z Prototype, jQuery, Dojo, Mootools itp.

Istnieje wiele bibliotek wykresów opartych na Raphaelu, w tym (ale nie tylko):

• gRaphael , rozszerzenie biblioteki graficznej Raphael
• Ico z intuicyjnym interfejsem API opartym na pojedynczym wywołaniu funkcji do tworzenia złożonych wykresów

Ujawnienie: Jestem deweloperem jednego z widelców Ico na github .

Jeśli używasz jQuery, zauważyłem, że flot jest bardzo dobry - wypróbuj przykłady, aby sprawdzić, czy odpowiadają twoim potrzebom, ale znalazłem, że robią większość tego, czego potrzebuję do mojego obecnego projektu.

Dodatkowo ExtJS 4.0 wprowadził świetny zestaw wykresów - bardzo wydajny i przeznaczony do pracy z danymi na żywo.

Sprawdź http://www.highcharts.com !

Highcharts to biblioteka wykresów napisana w czystym JavaScript, oferująca łatwy sposób dodawania interaktywnych wykresów do twojej strony internetowej lub aplikacji internetowej. Highcharts obsługuje obecnie typy linii, splajnu, obszaru, linii obszarów, kolumny, słupka, wykresu kołowego i punktowego.

Może nie do końca to, czego szukasz, ale
Google Chart API jest całkiem fajny i łatwy w użyciu.

Istnieje inna biblioteka javascript oparta na SVG. Nazywa się Protovis i pochodzi od Stanford Visualization Group

Umożliwia także tworzenie ładnych interaktywnych grafik i wizualizacji.

http://vis.stanford.edu/protovis/ex/

Chociaż dotyczy to tylko nowoczesnych przeglądarek internetowych

AKTUALIZACJA: Zespół Protovis przeprowadził się do innej biblioteki o nazwie d3.js (Dokumenty oparte na danych), jak powiedzieli:

„Zespół Protovis opracowuje teraz nową bibliotekę wizualizacji, D3.js, z ulepszoną obsługą animacji i interakcji. D3 opiera się na wielu koncepcjach w Protovis”

Nową bibliotekę można teraz znaleźć w:

http://mbostock.github.com/d3/

AKTUALIZACJA 2:

„Riksza” to zestaw narzędzi JavaScript do tworzenia interaktywnych wykresów szeregów czasowych. Oparty na d3.js, który znacznie upraszcza pracę z d3.js, chociaż jest nieco mniej wydajny.

http://code.shutterstock.com/rickshaw/

Ostatnio szukałem biblioteki wykresów javascript i oceniłem całą grupę, zanim ostatecznie zdecydowałem się na jqplot, który bardzo dobrze spełnia moje wymagania. Jak wspomniała odpowiedź Jean Vincent, naprawdę wybierasz między rozwiązaniem opartym na płótnie i SVG.

Moim zdaniem główne zalety i wady były następujące. Rozwiązania oparte na SVG, takie jak Raphael (i odgałęzienia) są świetne, jeśli chcesz konstruować wysoce dynamiczne / interaktywne wykresy. Lub jeśli wymagania dotyczące tworzenia wykresów znacznie przekraczają normę (np. Chcesz stworzyć jakiś wykres hybrydowy lub masz nową wizualizację, o której nikt jeszcze nie pomyślał). Minusem jest krzywa uczenia się i ilość kodu, który będziesz musiał napisać. Nie będziesz wymieniać wykresów w ciągu kilku minut, bądź przygotowany na zainwestowanie prawdziwego czasu na naukę, a następnie napisanie dużej ilości kodu, aby stworzyć stosunkowo prosty wykres.

Jeśli twoje wymagania dotyczące tworzenia wykresów są dość standardowe, np. Chcesz jakieś wykresy liniowe lub słupkowe lub wykres kołowy lub dwa, o ograniczonej interaktywności, warto przyjrzeć się rozwiązaniom opartym na płótnie. Nie będzie prawie żadnej krzywej uczenia się, będziesz w stanie uzyskać podstawowe wykresy w ciągu kilku minut, nie będziesz musiał pisać dużo kodu, kilka linii podstawowego javascript / jquery będzie wszystkim, czego potrzebujesz. Oczywiście będziesz w stanie produkować tylko określone typy wykresów obsługiwane przez bibliotekę, zwykle ograniczone do różnych smaków linii, słupka i ciasta. Wybór interaktywności będzie bardzo ograniczony, to znaczy nie będzie istniał w wielu bibliotekach, chociaż w przypadku lepszych możliwe są pewne ograniczone efekty aktywowania.

Poszedłem z JQplot, który jest rozwiązaniem opartym na kanwie, ponieważ naprawdę potrzebowałem tylko niektórych standardowych typów wykresów. Z moich badań i zabawy z różnymi opcjami okazało się, że jest on w pełni funkcjonalny (jeśli chodzi o standardowe wykresy) i niezwykle łatwy w użyciu, więc poleciłbym go, jeśli twoje wymagania są podobne.

Podsumowując, proste i chcę wykresy teraz, a następnie przejdź do JQplot. Skomplikowane / różne i bez presji czasu, a następnie idź z Rafaelem i przyjaciółmi.

jqPlot jest świetny. Jeśli twoje wymagania są dość „normalne” i chcesz po prostu narysować kilka wykresów, prawdopodobnie przytłacza Cię ilość opcji wykresów js. Zakładając, że nie chcesz robić godzin badań, po prostu skorzystaj z jqPlot, ponieważ jest to prawdopodobnie najlepszy wybór. Obejmuje większość przypadków użycia dla większości ludzi. Niektóre alternatywy są wyspecjalizowane na określonym typie wykresu lub zbudowane z myślą o konkretnym przypadku użycia.

Jako rodzaj późnej odpowiedzi spróbuj d3.js
http://mbostock.github.com/d3/

To kontynuacja protovis.
Duża różnica w stosunku do flot polega na liczbie obsługiwanych funkcji.
Chociaż flot może być prostszy, d3.js jest zdecydowanie potężniejszy.

Flotr to kolejna czysta biblioteka map JavaScript oparta na Prototypie i zainspirowana przez Flota

Wypróbuj PlotKit

Polecam gRaphaël do czystego tworzenia wykresów JavaScript wraz z czystą biblioteką grafiki wektorowej JavaScript, na której jest on zbudowany ( Raphaël ).

gRaphaël obsługuje obecnie Firefox 3.0+, Safari 3.0+, Opera 9.5+ i Internet Explorer 6.0+.

• framework: http://www.simile-widgets.org/

podstawowy: http://www.filamentgroup.com/examples/charting_v2/index_2.php

dobrze wyglądający: http://www.highcharts.com/

Kolejnym jest RGraph: tabele JavaScript i biblioteka grafów:

http://www.rgraph.net

Oparte na płótnie, więc jest szybkie i istnieje około 20 różnych typów wykresów. Jest również bezpłatny do użytku niekomercyjnego!

Mój ulubiony (flot) został już wspomniany.

Ale koniecznie zbadaj Ortho . Jest doskonały do ​​wykresów drzew i osi czasu.

W bibliotece wykresów dojo jest dużo aktywności i co jest świetne, bez problemu używam jej w aplikacji AIR, całkiem fajnie! Zobacz na przykład http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/

Sprawdź Google Visualization API , który jest swego rodzaju uogólnieniem prostszego API Chart

http://code.google.com/apis/visualization/documentation/gallery.html

Ma bardzo fajne interaktywne opcje, w tym mapy, wskaźniki i wykresy.

Właśnie kupiliśmy licencję TechOctave Charts Suite dla naszego nowego startupu . Bardzo je polecam. Licencjonowanie jest proste. Wykresy wyglądają świetnie! Łatwo było zacząć i ma potężny interfejs API, gdy potrzebujemy. Byłem zszokowany tym, jak czysty i rozszerzalny jest kod. Naprawdę zadowolony z naszego wyboru.

Wypróbuj oś czasu symulacji MIT, którą można przekształcić w wykres - http://simile.mit.edu/timeline/

lub ostatni, http://code.google.com/p/gchart/

Nie jest to biblioteka Javascript, ale może to być odpowiednia alternatywa - sprawdź Wykresy Google, w których możesz generować wykresy, przesyłając zapytania do ich serwisu internetowego.

Spójrz na Bluff . To port JavaScript biblioteki graficznej Gruff dla Ruby.

Protochart jest wszystkim, czego potrzebujesz

Sencha przejęła Raphaela, a teraz ich wykresy są czystym javascript od wersji 4. Wspomniane wyżej Emprise i HighCharts są moimi dwoma ulubionymi.

http://www.sencha.com/

Bardziej nietypowe wykresy: http://thejit.org/

Mogę polecić ArcadiaCharts . Zupełnie nowa profesjonalna biblioteka wykresów dla JavaScript i GWT. Działa we wszystkich przeglądarkach bez wtyczek. Łatwy i szybki w użyciu: tworzy świetnie wyglądające wykresy za pomocą zaledwie kilku linii kodu. Bezpłatnie do użytku niekomercyjnego.

Wykresy Fusion mają nową bibliotekę javascript / jquery, która wygląda obiecująco.

W przypadku, gdy potrzebujesz tylko wykresu słupkowego. Opublikowałem kod, którego używałem w starym projekcie. Ktoś powiedział mi, że implementacja VML jest zepsuta w najnowszych wersjach IE, ale SVG powinien działać dobrze. Być może wrócę do projektu i zwolnię niektóre renderery serwerów, które już mam, a może warstwę renderującą WebGL. Istnieje link: http://blog.conquex.com/?p=64

Prawdopodobnie nie to, czego szuka OP, ale odkąd to pytanie stało się listą opcji biblioteki wykresów JS: jQuery Sparklines jest naprawdę fajny.

Sprawdź ZingChart HTML5 Canvas, SVG, VML i wykresy Flash . Bardzo wydajna i kompatybilna biblioteka. Jestem w zespole Zinga - wspomnij o nas na Twitterze @zingchart lub zgłoś pytania na [email protected].