Wykres kołowy z jQuery

Question 1

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.

Question 2

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

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

Question 3

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.

Question 4

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ć!

Pokaż fragment kodu

$('#pie-chart').zingchart({
  "data": {
    "type": "pie",
    "legend": {},
    "series": [{
      "values": [5]
    }, {
      "values": [10]
    }, {
      "values": [15]
    }]
  }
});

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script>

<div id="pie-chart"></div>

Rozwiń fragment

Question 5

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 .

Question 6

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.

Question 7

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:

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.

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.

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

Question 8

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: