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.
javascript
jquery
jquery-plugins
google-visualization
Arun P Johny
źródło
źródło
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ą
CSS
konfigurację, 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.
źródło
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>
źródło
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 .
źródło
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.
źródło
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:
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.
źródło
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:
źródło