Ich möchte ein Kreisdiagramm in JavaScript erstellen. Bei der Suche habe ich die Google Charts API gefunden. Da wir jQuery verwenden, habe ich festgestellt, dass eine jQuery-Integration für Google Charts verfügbar ist.
Mein Problem ist jedoch, dass hier die tatsächlichen Daten zum Erstellen der Diagramme an den Google-Server gesendet werden. Gibt es eine Möglichkeit zu verhindern, dass die Daten an Google gesendet werden? Ich bin besorgt darüber, meine Daten an Dritte zu senden.
javascript
jquery
jquery-plugins
google-visualization
Arun P Johny
quelle
quelle
Flot
Einschränkungen: Linien, Punkte, gefüllte Bereiche, Balken, Kuchen und Kombinationen davon
Aus Sicht der Interaktion bringt Sie Flot bei weitem so nah wie möglich an die Flash-Grafik heran
jQuery
. Während die Grafikausgabe ziemlich raffiniert ist und gut aussieht, können Sie auch mit Datenpunkten interagieren. Damit meine ich, dass Sie über einen Datenpunkt schweben und visuelles Feedback zum Wert dieses Punkts in der Grafik erhalten können.Die Trunk-Version von Flot unterstützt Tortendiagramme.
Flot Zoom-Funktion.
Darüber hinaus können Sie einen Teil des Diagramms auswählen, um Daten für eine bestimmte „Zone“ zurückzugewinnen. Als sekundäres Merkmal dieser „Zonierung“ können Sie auch einen Bereich in einem Diagramm auswählen und zoomen, um die Datenpunkte etwas genauer zu sehen. Sehr cool .
Sparklines
Einschränkungen: Torte, Linie, Balken, Kombination
Sparklines ist mein Lieblings-Mini-Grafikwerkzeug da draußen. Wirklich großartig für Diagramme im Dashboard-Stil (denken Sie beim nächsten Anmelden an das Google Analytics-Dashboard). Weil sie so klein sind, können sie in die Zeile aufgenommen werden (wie im obigen Beispiel). Eine weitere nette Idee, die in allen Grafik-Plugins verwendet werden kann, sind die Selbstaktualisierungsfunktionen. Ihre Mouse-Speed-Demo zeigt Ihnen die Kraft des Live-Charting von seiner besten Seite.
Abfragediagramm 0.21
Einschränkungen: Bereich, Linie, Balken und Kombinationen davon
jQuery Chart 0.21 ist nicht das am besten aussehende Chart-Plugin, das es zu sagen gibt. Es ist ziemlich einfach in der Funktionalität, wenn es um die Diagramme geht, die es handhaben kann, aber es kann flexibel sein, wenn Sie etwas Zeit und Mühe investieren können.
Das Hinzufügen von Werten zu einem Diagramm ist relativ einfach:
jQchart
Einschränkungen: Balken, Linie
jQchart ist seltsam, sie haben Animationsübergänge und Drag & Drop-Funktionen in das Diagramm integriert, es ist jedoch etwas klobig - und scheinbar sinnlos. Es erzeugt gut aussehende Diagramme, wenn Sie das
CSS
Setup richtig machen, aber es gibt bessere da draußen.TufteGraph
Einschränkungen: Bar und Stacked Bar
Tuftegraph verkauft sich selbst als "hübsche Balkendiagramme, die Sie Ihrer Mutter zeigen würden". Es kommt nahe, Flot ist hübscher, aber Tufte eignet sich sehr leicht. Obwohl dies mit Einschränkungen verbunden ist, stehen nur wenige Optionen zur Auswahl, sodass Sie das bekommen, was Sie erhalten. Schauen Sie sich das an, um ein schnelles Gewinnbalkendiagramm zu erhalten.
quelle
Tonnenweise tolle Vorschläge, die ZingChart für ein gutes Maß auf den Stapel werfen werden . Wir haben kürzlich einen jQuery-Wrapper für die Bibliothek veröffentlicht, der das Erstellen und Anpassen von Diagrammen noch einfacher macht. Die CDN-Links finden Sie in der Demo unten.
Ich bin im ZingChart-Team und wir sind hier, um alle Fragen von Ihnen zu beantworten!
Code-Snippet anzeigen
quelle
Einige andere, die nicht erwähnt wurden:
Für Mini Pies, Lines und Bars ist Peity brillant, einfach, winzig, schnell und verwendet ein wirklich elegantes Markup.
Ich bin mir nicht sicher, ob es eine Beziehung zu Flot gibt (wie der Name schon sagt ), aber Flotr2 ist ziemlich gut und macht sicherlich bessere Kuchen als Flot.
Bluff erzeugt gut aussehende Liniendiagramme, aber ich hatte ein bisschen Probleme mit den Kuchen.
Nicht das, wonach ich gesucht habe, aber ein anderes kommerzielles Produkt (ähnlich wie Highcharts) ist TeeChart .
quelle
Chart.js ist sehr nützlich und unterstützt auch zahlreiche andere Diagrammtypen.
Es kann sowohl mit als auch ohne jQuery verwendet werden.
quelle
Es gibt einen neuen Player auf dem Gebiet, der erweiterte Navigationskarten anbietet, die Canvas für reibungslose Animationen und Leistung verwenden:
https://zoomcharts.com/
Beispiel für Diagramme:
Dokumentation: https://zoomcharts.com/de/javascript-charts-library/charts-packages/pie-chart/
Was ist cool an dieser Bibliothek:
Diagramme sind kostenlos für nichtkommerzielle Zwecke, kommerzielle Lizenzen und technischen Support.
Auch interaktive Zeitdiagramme und Netzdiagramme stehen Ihnen zur Verfügung.
Diagramme werden mit umfangreichen APIs und Einstellungen geliefert, sodass Sie jeden Aspekt der Diagramme steuern können.
quelle
Überprüfen Sie TeeChart auf Javascript
Kostenlos für nichtkommerzielle Zwecke.
Enthält Plugins für jQuery , Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript usw.
Interaktive Demos hier und hier .
Einige Screenshots einiger Demos:
quelle