webentwicklung-frage-antwort-db.com.de

Erstellen von Diagrammen mit Angularjs

Ich habe auch nach Diagrammlösungen gesucht, die gut zu Angular.JS-Anweisungen passen. Ich bin auf ein paar gestoßen, war aber sehr verwirrt. Hat jemand Vorschläge zum Erstellen interaktiver Diagramme, die in Angular.JS-Module integriert sind?

angularjscharts
43
Hmahwish

Angular-Charts ist eine Bibliothek, die ich zum Erstellen von Diagrammen mit angular und D geschrieben habe.

Es kapselt grundlegende Diagramme, die mit D3 erstellt werden können, in einer angular Direktive. Außerdem bietet es Funktionen wie

  1. Chartwechsel mit einem Klick;
  2. Auto Tooltips;
  3. Automatische Anpassung an Container;
  4. Legenden;
  5. Einfaches Datenformat: Definieren Sie nur, was Sie auf x und was Sie auf y benötigen.

Es steht eine Angular-Charts-Demo zur Verfügung.

52
Chinmay Kulkarni

Ich habe einige Nice AngularJS-Diagrammlösungen gesehen, die Highcharts verwenden. Es gibt eine highcharts-ng Direktive auf GitHub, um die AngularJS-Integration zu vereinfachen, und einigeBeispiele auf JSFiddle, um Ihnen einen schnellen Einblick in das zu geben, was möglich ist.

Sie richten das Diagramm auf der JS-Seite folgendermaßen ein:

$scope.chart = {
    options: {
        chart: {
            type: 'bar'
        }
    },
    series: [{
        data: [10, 15, 12, 8, 7]
    }],
    title: {
        text: 'Hello'
    },
    loading: false
}

Und beziehen Sie sich dann im HTML wie folgt darauf:

<highchart id="chart1" config="chart"></highchart>

Warnung zur Verwendung/Lizenzierung: Highcharts sind unter der Creative Commons-Lizenz für nichtkommerzielle Zwecke kostenlos verfügbar. Wenn Sie in einem gewinnorientierten/kommerziellen Szenario nach Diagrammoptionen suchen, müssen Sie das Produkt kaufen oder anderswo suchen.

16
ajk

Die ZingChart-Bibliothek hat eine AngularJS-Direktive , die im eigenen Haus erstellt wurde. Features sind:

  • Voller Zugriff auf die gesamte ZingChart-Bibliothek (alle Diagramme, Karten und Funktionen)
  • Nutzt die 2-Wege-Datenbindung von Angular und vereinfacht die Aktualisierung von Daten und Diagrammelementen

  • Unterstützung durch das Entwicklerteam

    ...
$scope.myJson = {
type : 'line',
   series : [
      { values : [54,23,34,23,43] },{ values : [10,15,16,20,40] }
   ]
};
...

<zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart>

Es ist eine vollständige Demo mit Codebeispielen verfügbar.

16
RockinSocks

Hast du D3.js ausprobiert? Hier ist ein gutes Beispiel .

6
D.S

Ich habe eine angular Direktive für xCharts erstellt, die eine Nice js chart Bibliothek ist http://tenxer.github.io/xcharts/ . Sie können es mit installieren Laube, ganz einfach: https://github.com/radu-cigmaian/ng-xCharts

Highcharts sind ebenfalls eine Lösung, jedoch nicht kostenlos für den kommerziellen Gebrauch.

5
radu.cigmaian

Um hier weitere nützliche Ressourcen zu sammeln:

Wie bereits erwähnt, ist D3.js definitiv die beste Visualisierungsbibliothek für Diagramme. Um es in AngularJS zu benutzen, habe ich ein Angular-Chart entwickelt . Es ist eine einfach zu verwendende Direktive, die D3.js mit der AngularJS 2-Way-DataBinding verbindet. Auf diese Weise wird das Diagramm automatisch aktualisiert, wenn Sie die Konfigurationsoptionen ändern, und gleichzeitig speichert das Diagramm seinen Status (Zoomstufe, ...), um ihn in der AngularJS-Welt verfügbar zu machen.

Schauen Sie sich die Beispiele an, um sich davon zu überzeugen.

3
Max Klenk

AngularJS-Diagramm-Plugin und FusionCharts-Bibliothek zum Hinzufügen interaktiver JavaScript-Diagramme und -Diagramme zu Ihren Web-/Mobilanwendungen - mit nur einer einzigen Direktive. Link: http://www.fusioncharts.com/angularjs-charts/#/demos/ex1

2
Vishalika