Wykres kołowy z jQuery

93

Chcę utworzyć wykres kołowy w JavaScript. Podczas wyszukiwania znalazłem Google Charts API. Ponieważ używamy jQuery, odkryłem, że jest dostępna integracja jQuery dla Google Charts .

Ale mój problem polega na tym, że rzeczywiste dane są wysyłane na serwer Google w celu utworzenia wykresów. Czy istnieje sposób, aby zapobiec wysyłaniu danych do Google? Obawiam się, że moje dane zostaną przesłane do osoby trzeciej.

Arun P Johny
źródło

Odpowiedzi:

48

jqPlot wygląda całkiem nieźle i jest open source.

Oto link do najbardziej imponujących i aktualnych przykładów jqPlot .

Thomas Bratt
źródło
uwaga: w większości wersji (również ostatnio) używa odwołania $ poza deklaracją (funkcji ($) ..), więc może to powodować konflikt z prototypem lub czymkolwiek innym
Mario Peshev.
99

Flot

Ograniczenia: linie, punkty, wypełnione obszary, słupki, ciasto i ich kombinacje

Z punktu widzenia interakcji, Flot zdecydowanie zbliży Cię do wykresów Flash, jak tylko możesz jQuery. Chociaż dane wyjściowe są dość zgrabne i świetnie wyglądają, możesz także wchodzić w interakcje z punktami danych. Rozumiem przez to, że możesz najechać kursorem na punkt danych i uzyskać wizualną informację zwrotną na temat wartości tego punktu na wykresie.

Flot w wersji trunk obsługuje wykresy kołowe.

Funkcja Flot Zoom.

Oprócz tego masz również możliwość wybrania fragmentu wykresu, aby odzyskać dane dla określonej „strefy”. Dodatkową funkcją tego „podziału na strefy” jest również wybranie obszaru na wykresie i powiększenie, aby nieco dokładniej przyjrzeć się punktom danych. Bardzo fajnie .


Wykresy przebiegu w czasie

Ograniczenia: ciasto, linia, pasek, kombinacja

Wykresy przebiegu w czasie to moje ulubione mini narzędzie do tworzenia wykresów. Naprawdę świetne do wykresów w stylu pulpitu nawigacyjnego (pomyśl o panelu Google Analytics przy następnym logowaniu). Ponieważ są tak małe, można je umieścić w linii (jak w powyższym przykładzie). Innym fajnym pomysłem, który może być użyty we wszystkich wtyczkach graficznych, jest możliwość automatycznego odświeżania. Ich demo Mouse-Speed ​​pokazuje moc tworzenia wykresów na żywo w najlepszym wydaniu.


Wykres zapytań 0.21

Ograniczenia: obszar, linia, słupek i ich kombinacje

Trzeba przyznać, że jQuery Chart 0.21 nie jest najładniejszą wtyczką do tworzenia wykresów. Ma dość podstawową funkcjonalność, jeśli chodzi o wykresy, które może obsługiwać, jednak może być elastyczny, jeśli możesz włożyć w to trochę czasu i wysiłku.

Dodawanie wartości do wykresu jest stosunkowo proste:

.chartAdd({

    "label"  : "Leads",
    "type"   : "Line",
    "color"  : "#008800",
    "values" : ["100","124","222","44","123","23","99"]
});

jQchart

Ograniczenia: bar, linia

jQchart jest dziwny, mają wbudowane transkrypcje animacji i funkcję przeciągania / upuszczania na wykresie, jednak jest to trochę niezgrabne - i pozornie bezcelowe. Generuje ładnie wyglądające wykresy, jeśli masz odpowiednią CSSkonfigurację, ale są tam lepsze.


TufteGraph

Ograniczenia: słupek i słupek ułożony w stos

Tuftegraph sprzedaje się jako „ładne wykresy słupkowe, które możesz pokazać swojej matce”. Jest blisko, Flot jest ładniejszy, ale Tufte jest bardzo lekki. Chociaż wiąże się to z ograniczeniami - jest kilka opcji do wyboru, więc dostajesz to, co masz. Sprawdź to, aby uzyskać wykres słupkowy szybkiej wygranej.

Sorantis
źródło
Dzięki za odpowiedź. Sprawdzam jqPlot teraz, wydaje się, że rozwiązuje mój problem. Ale 1 problem nadal pozostaje, potrzebuję, aby legendy wykresów pojawiały się na wykresie niż na zewnątrz.
Arun P Johny
7
Ilekroć widzę ładną listę, taką jak ta, pragnę, aby każda pozycja była oddzielną odpowiedzią, aby można było na nią głosować niezależnie. O wiele bardziej efektywne byłoby po prostu użycie biblioteki z najwyższym wynikiem.
Jesse Aldridge
2
Chiming tutaj jako ktoś, kto używał Flota i stwierdził, że jest to dobra, solidna libido.
Brighid McDonnell
grr Próbowałem flot, ale porzuciłem go, ponieważ nie mogłem dostosować etykiet osi
chiliNUT
Sorantis, link do Query Chart 0.21 jest martwy.
jawo
5

Mnóstwo świetnych sugestii tutaj, po prostu rzucę ZingChart na stos, aby uzyskać dobrą miarę. Niedawno wydaliśmy opakowanie jQuery dla biblioteki, które jeszcze bardziej ułatwia tworzenie i dostosowywanie wykresów. Linki CDN są w demo poniżej.

Jestem w zespole ZingChart i jesteśmy tutaj, aby odpowiedzieć na wszelkie pytania, które mogą się pojawić!

RockinSocks
źródło
4

Kilka innych, o których nie wspomniano:

W przypadku mini ciastek, linii i batonów Peity jest genialne, proste, małe, szybkie, wykorzystuje naprawdę eleganckie oznaczenia.

Nie jestem pewien jego związku z Flotem (biorąc pod uwagę jego nazwę), ale Flotr2 jest całkiem niezły, z pewnością robi lepsze ciasta niż Flot.

Bluff generuje ładnie wyglądające wykresy liniowe, ale miałem trochę problemów z jego ciastami.

Nie o to mi chodziło, ale innym komercyjnym produktem (podobnym do Highcharts) jest TeeChart .

Synchro
źródło
4

Chart.js jest całkiem przydatny, wspierając również wiele innych typów wykresów.

Może być używany zarówno z jQuery, jak i bez.

Diamond Python
źródło
1
Doskonała biblioteka wykresów kołowych. Używam charts.js do wykresów kołowych i morris.js do wszystkiego innego. morris.js jest fantastyczny, z wyjątkiem tych głupich wykresów pierścieniowych f! & * #. Kiedy chcę mieć rzeczywisty wykres kołowy bez dziury w pączku af! ^ & * @, Nie szukam dalej niż charts.js. Charts.js jest prawdopodobnie świetnym rozwiązaniem również dla innych typów wykresów, ale po prostu nie można pokonać celowo niewiarygodnie łatwego w użyciu API morris.js
chiliNUT
3

W tej dziedzinie pojawił się nowy gracz, oferujący zaawansowane mapy nawigacyjne, które używają Canvas do superpłynnych animacji i wydajności:

https://zoomcharts.com/

Przykładowe wykresy:

interaktywny wykres kołowy

Dokumentacja: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/

Co jest fajnego w tej bibliotece:

  • Inne plastry można rozszerzyć
  • Ciasto oferuje możliwość przechodzenia do szczegółów struktur hierarchicznych (patrz przykład)
  • łatwo napisz własny kontroler źródła danych lub udostępnij prosty plik json
  • eksportować obrazy w wysokiej rozdzielczości po wyjęciu z pudełka
  • pełne wsparcie dotykowe , działa płynnie na iPadzie, iPhonie, Androidzie itp.

wprowadź opis obrazu tutaj

Wykresy są bezpłatne do użytku niekomercyjnego, dostępne są również licencje komercyjne i pomoc techniczna.

Do dyspozycji są również interaktywne wykresy czasu i wykresy netto. wprowadź opis obrazu tutaj

wprowadź opis obrazu tutaj

Wykresy mają rozbudowany interfejs API i ustawienia, dzięki czemu możesz kontrolować każdy aspekt wykresów.

jancha
źródło
Co masz na myśli? Mamy już wbudowaną funkcję kadrowania obrazu.
jancha
0

Sprawdź TeeChart pod kątem JavaScript

  • Bezpłatnie do użytku niekomercyjnego.

  • Zawiera wtyczki do jQuery , Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript itp.

  • Interaktywne prezentacje tutaj i tutaj .

  • Niektóre zrzuty ekranu niektórych wersji demonstracyjnych:

TeeChart Javascript - bary

TeeChart Javascript - Ciasto

TeeChart Javascript - Punkty

Yeray
źródło