Biblioteka wykresów JavaScript


223

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

Odpowiedzi:


160

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:

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 .


5
Grafico i Ico to dwa niekompatybilne widelce początkowego Ico Alexa Younga. Nie można więc stwierdzić, że Ico stało się Grafico. Grafico jest tylko jednym z widelców.
Jean Vincent,

Należy zauważyć, że Raphael wydaje się nie być już utrzymywany. Ostatnim zatwierdzeniem był lipiec 2010 r.
Alastair Pitts,

1
Właśnie pobrałem wykresy Rafaela, bardzo mi się podobają, ale żadnych dokumentów, tylko dla ostrzeżenia.
Orbit

@Alastair: Raphael jest teraz sponsorowany i rozwijany przez Sencha ... a przynajmniej tak mówią :)
Roy Tinker

1
SVG nie jest obsługiwany w systemie Android wcześniejszym niż Honeycomb. Jeśli wymagana jest możliwość przeglądania wykresów na szerokiej gamie obecnych urządzeń z Androidem, musisz wybrać rozwiązanie Canvas. W tym artykule na temat wykresów dotykowych Sencha zawarto więcej szczegółowych informacji na temat map mobilnych i dlaczego Sencha Touch wybrał trasę Canvas.
Pallavi Anderson

70

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.


2
Jest to ta sama biblioteka, którą Geoff Dalgas użył do stworzenia wykresu reputacji tutaj na StackOverflow. To naprawdę niezły zestaw.
Charles Roper

Moją jedyną prawdziwą skargą na flot jest to, że podczas renderowania w IE wygląda okropnie przy każdym powiększeniu innym niż 100% (tj. Wszystkie linie / bloki nie skalują się razem - to zdecydowanie problem dla tych z nas, którzy mają wyświetlacze o wysokiej rozdzielczości).
Bittercoder

2
Wygląda na to, że wykresy flotowe wyglądają ładniej niż wiele innych, na które patrzyłem. Oto link do 20 bibliotek wykresów JavaScript: javascript.open-libraries.com/utilities/chart/…
B 7

Lubię też flota, używałem go już wiele razy w różnych aplikacjach internetowych.
fedmich

1
Ogólnie lubię flot, ale chce, aby wszystkie dane były liczbami, więc jeśli chcesz wykreślić coś takiego jak sprzedaż na klienta (według nazwy) lub na produkt, to nie zadziała
Zachary K

60

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.


12
Warto zauważyć, że ta biblioteka jest bezpłatna do użytku niekomercyjnego, ale kosztuje jedno i wiele witryn. Wygląda jednak na dość rozsądną cenę.
Nick Spacek

Na początku jest to bezwstydna wtyczka, ale wyglądają NAPRAWDĘ niesamowicie !! Nie jest to jednak darmowe wykorzystanie komercyjne, nie mam odniesienia, czy ceny są rozsądne, czy nie, ale wyglądają dobrze na pierwszy rzut oka!
Trufa,

Jest to ta sama biblioteka wykresów, która jest używana w CloudFlare.com i wygląda naprawdę świetnie. Już miałem użyć biblioteki wykresów DevExpress, która jest ASP.NET i renderuje i obrazuje w serwerze, gdy natknąłem się na bibliotekę Highcharts. Od razu przekonałem się, że to jest właściwa droga. Kiedy dowiedziałem się, że CloudFlare, który ma jeden z najbardziej przyciągających wzrok pulpitów nawigacyjnych / analitycznych, jakie widziałem, również go używa, zostałem sprzedany! Obecnie eksperymentuję z tym i zadziałało przy pierwszej próbie osadzenia wykresu na mojej stronie ... więc wydaje się, że jest łatwy w użyciu!
Loudenvier

1
Jeszcze jeden głos na Highcharts. Obecnie go używam i jest świetny. Obsługuje jQuery, Mootools i Prototype, i jest bardzo łatwy w konfiguracji i obsłudze.
gnclmorais,

1
Sam Stackoverflow wykorzystuje wysokie wykresy stackoverflow.com/users/22656/jon-skeet?tab=reputation
Scott

36

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


16
nie jest javascript
user102008

5
pamiętaj tylko, że Google Chart wymaga połączenia z Internetem, a także ma pewne ograniczenia dotyczące dozwolonej liczby żądań klientów
fedmich

@ user102008: to jest teraz :) (można nadal uzyskać dostęp do starego do obrazu API opartego jeśli chcesz)
Spycho

Interfejsu API Google Chart nie można używać offline, co jest szkodliwe dla rozwoju aplikacji mobilnych.
oldwizard

Muszę zrobić Świecznik typu poziomego, czy ktoś wie, czy jest to możliwe z Google Chart API?
Tom Stickel

15

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/


Na podstawie szybkiego spojrzenia nie sądzę, by D3 „zastępował” Protovis. Powiedziałbym, że zespół „ruszył dalej”, ponieważ uważają to za bardziej interesujące i nowatorskie.
David J.

14

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.


14

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.


Tak też myślę po przeprowadzeniu badań. Obecnie wygląda na to, że jest to jedna z najlepszych dostępnych darmowych bibliotek wykresów JS.
jturcotte

4

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.




3

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+.


1
chcę tylko powiedzieć, że nie ma żadnych dokumentów dla tej biblioteki, chociaż jest to bardzo miłe.
Orbit


3

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!


2

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

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





2

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.



1

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.






0

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.


Bawiłem się tym i zauważyłem, że nie ma sposobu na uzyskanie licencji komercyjnej na stronie internetowej. W rzeczywistości strona internetowa nie jest jasne, czy jest to bezpłatne, czy nie.
zumalifeguard

Masz rację. Witryna została zaktualizowana, dzięki czemu możesz łatwo dowiedzieć się, która licencja komercyjna odpowiada Twoim wymaganiom: ArcadiaCharts .
Hoang-Tran Vo


0

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



Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.