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.

jqPlot sieht ziemlich gut aus und ist Open Source.

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

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.

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!

$('#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>

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 .

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

Es kann sowohl mit als auch ohne jQuery verwendet werden.

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:

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

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.

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