Kreisdiagramm mit jQuery

93

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.

Arun P Johny
quelle

Antworten:

48

jqPlot sieht ziemlich gut aus und ist Open Source.

Hier ist ein Link zu den beeindruckendsten und aktuellsten jqPlot-Beispielen .

Thomas Bratt
quelle
Hinweis: In den meisten Versionen (im Moment auch neu) wird eine $ -Referenz außerhalb einer (function ($) ..) - Deklaration verwendet, sodass ein Konflikt mit dem Prototyp oder etwas anderem auftreten kann
Mario Peshev,
99

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:

.chartAdd({

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

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

Sorantis
quelle
Danke für deine Antwort. Ich überprüfe jetzt jqPlot, es scheint mein Problem zu lösen. Aber 1 Problem bleibt bestehen, ich brauche die Diagrammlegenden, um mit im Diagramm als außerhalb zu erscheinen.
Arun P Johny
7
Immer wenn ich eine schöne Liste wie diese sehe, wünsche ich mir, dass jeder Punkt eine separate Antwort ist, damit über sie unabhängig abgestimmt werden kann. Es wäre viel effizienter, einfach die Bibliothek mit der höchsten Punktzahl zu verwenden.
Jesse Aldridge
2
Ich mische mich hier als jemand ein, der Flot benutzt hat und es als eine gute, solide Bibliothek ansieht.
Brighid McDonnell
grr ich habe flot ausprobiert, aber es fallen
gelassen,
Sorantis, Link zu Query Chart 0.21 ist tot.
Jawo
5

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!

RockinSocks
quelle
4

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 .

Synchro
quelle
4

Chart.js ist sehr nützlich und unterstützt auch zahlreiche andere Diagrammtypen.

Es kann sowohl mit als auch ohne jQuery verwendet werden.

Diamant Python
quelle
1
Ausgezeichnete Kreisdiagrammbibliothek. Ich verwende charts.js für Kreisdiagramme und morris.js für alles andere. morris.js ist fantastisch, bis auf diese dummen f! & * # Donut-Charts. Wenn ich ein tatsächliches Kreisdiagramm ohne af! ^ & * @ Donut-Loch darin haben möchte, suche ich nicht weiter als charts.js. Charts.js ist wahrscheinlich auch eine großartige Lösung für andere Arten von Diagrammen, aber Sie können die absichtlich unglaublich einfach zu verwendende API von morris.js
chiliNUT
3

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:

interaktives Kreisdiagramm

Dokumentation: https://zoomcharts.com/de/javascript-charts-library/charts-packages/pie-chart/

Was ist cool an dieser Bibliothek:

  • Andere Slice können erweitert werden
  • Pie bietet einen Drilldown für hierarchische Strukturen an (siehe Beispiel)
  • Schreiben Sie einfach Ihren eigenen Datenquellen-Controller oder stellen Sie eine einfache JSON-Datei bereit
  • Exportieren Sie hochauflösende Bilder sofort
  • Volle Touch- Unterstützung, funktioniert reibungslos auf iPad, iPhone, Android usw.

Geben Sie hier die Bildbeschreibung ein

Diagramme sind kostenlos für nichtkommerzielle Zwecke, kommerzielle Lizenzen und technischen Support.

Auch interaktive Zeitdiagramme und Netzdiagramme stehen Ihnen zur Verfügung. Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Diagramme werden mit umfangreichen APIs und Einstellungen geliefert, sodass Sie jeden Aspekt der Diagramme steuern können.

Jancha
quelle
Was meinst du? Wir haben bereits eine integrierte Funktion zum Zuschneiden von Bildern.
Jancha
0

Ü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:

TeeChart Javascript - Bars

TeeChart Javascript - Pie

TeeChart Javascript - Punkte

Yeray
quelle