Erstellen von Charting -Direktiven mit AngularJS und D3.Js

Kernpunkte

• d3.js ist eine JavaScript-Bibliothek, die in Verbindung mit AngularJs verwendet werden kann, um interaktive Echtzeitdiagramme mit SVG (skalierbare Vektorgrafiken) zu erstellen. Mit dieser Kombination können Entwickler reichhaltige Webanwendungen mit dynamischer Datenvisualisierung erstellen.
• AngularJs und D3.Js können auf HTML -Seiten eingestellt werden, um Diagrichtungsrichtlinien zu erstellen. Dies umfasst das Erstellen von AngularJS -Controllern und -anweisungen und die Verwendung des Controllers, um die in der Tabelle gezogenen Daten zu speichern. Anschließend können Sie diese Anweisung verwenden, um ein Zeilendiagramm mit D3.Js. zu zeichnen.
• Klicks können in Echtzeit aktualisiert werden, um Änderungen der zugrunde liegenden Daten widerzuspiegeln. Dies kann durch die Verwendung eines Sammlungsbeobachters in der Anweisung erfolgen, um Änderungen in den Sammeldaten zu überwachen und dann das Diagramm neu zu zeichnen, wenn die Änderung erkannt wird.
• d3.js können mit anderen Versionen von Winkel- und anderen JavaScript -Frameworks verwendet werden. Es bietet ein leistungsstarkes Datenbindungssystem, mit dem Datenaktualisierungen verarbeitet werden können, während AngularJS eine strukturierte Methode zum Erstellen von Anwendungen und zur Behandlung von Datenaktualisierungen bietet.

D3 ist eine JavaScript -Bibliothek, in der interaktive Diagramme mithilfe von HTML5 -Technologie -Skalierbar -Vektorgrafiken (SVG) erstellt werden können. Das Erstellen eines Diagramms direkt mit SVG kann schmerzhaft sein, da Sie sich an die von SVG unterstützten Formen erinnern und die API mehrmals aufrufen müssen, um die Diagramm dynamisch zu gestalten. D3 eliminiert den größten Teil des Schmerzes und bietet eine einfache Schnittstelle zum Erstellen von SVG-basierten Diagrammen. Jay Raj hat zwei gute SitePoint -Artikel über die Verwendung von D3 veröffentlicht.

Die meisten von Ihnen müssen möglicherweise keine AngularJs formell einführen. AngularJS ist ein clientseitiges JavaScript-Framework zum Erstellen von reichhaltigen Webanwendungen. Einer der Hauptvorteile von AngularJS ist die Unterstützung für Anweisungen. Richtlinien bieten eine hervorragende Möglichkeit, unsere eigenen HTML -Attribute und Elemente zu definieren. Es hilft auch, die Tags und Code voneinander zu trennen.

AngularJS ist auch bei der Datenbindung sehr leistungsfähig. Diese Funktion spart viel Zeit und Mühe, um die Benutzeroberfläche basierend auf den Daten im Modell zu aktualisieren. In der modernen Online-Welt bitten Kunden Entwickler, reaktionsschnelle Websites in Echtzeit aufzubauen. Dies bedeutet, dass Kunden immer die neuesten Daten auf dem Bildschirm sehen möchten. Sobald jemand die Daten auf dem Backend geändert hat, muss die Daten Benutzeroberfläche aktualisiert werden. Wenn wir keine Unterstützung für die Datenbindung haben, ist es sehr schwierig und ineffizient, solche Echtzeit-Updates durchzuführen.

In diesem Artikel werden wir lernen, wie man Echtzeit-AngularJS-Richtlinien erstellt, die D3-Diagramme einwickeln.

Umgebungseinstellungen

Erstens müssen wir die Umgebung einrichten. Wir müssen AngularJs und D3 in die HTML -Seite einbeziehen. Da wir nur eine Diagrammrichtlinie erstellen, müssen wir einen AngularJS -Controller und eine Richtlinie erstellen. In der Controller benötigen wir eine Sammlung, die die Daten im Diagramm enthält. Das folgende Code -Snippet zeigt den ersten Controller und die Anweisungen an. Wir werden diesen Komponenten später mehr Code hinzufügen.

var app = angular.module("chartApp", []);

app.controller("SalesController", ["$scope", function($scope) {
  $scope.salesData = [
    {hour: 1,sales: 54},
    {hour: 2,sales: 66},
    {hour: 3,sales: 77},
    {hour: 4,sales: 70},
    {hour: 5,sales: 60},
    {hour: 6,sales: 63},
    {hour: 7,sales: 55},
    {hour: 8,sales: 47},
    {hour: 9,sales: 55},
    {hour: 10,sales: 30}
  ];
}]);

app.directive("linearChart", function($window) {
  return{
    restrict: "EA",
    template: "<svg height='200' width='850'></svg>",
    link: function(scope, elem, attrs){
    }
  };
});

Wir werden die Verbindungsfunktion in den obigen Anweisungen bevölkern, um die im Controller gespeicherten Daten zu verwenden, und das Leitungsdiagramm mit D3 zeichnen. Die Vorlage der Anweisung enthält ein SVG -Element. Wir werden die API von D3 auf dieses Element anwenden, um das Diagramm zu zeichnen. Das folgende Code -Snippet zeigt eine Beispielverwendung einer Richtlinie:

<div linear-chart chart-data="salesData"></div>

Lassen Sie uns nun die grundlegenden Daten sammeln, die wir zum Zeichnen eines Diagramms benötigen. Es enthält die zu zeichnenden Daten, JavaScript -Objekte von SVG -Elementen und andere statische Daten.

var salesDataToPlot=scope[attrs.chartData];
var padding = 20;
var pathClass = "path";
var xScale, yScale, xAxisGen, yAxisGen, lineFun;

var d3 = $window.d3;
var rawSvg = elem.find("svg")[0];
var svg = d3.select(rawSvg);

Nach dem Laden der D3 -Bibliothek ist das D3 -Objekt als globale Variable verfügbar. Wenn wir es jedoch direkt im Codeblock verwenden, ist es schwierig, diesen Codeblock zu testen. Um die Anweisung testbar zu machen, verwende ich das Objekt mit $window.

Zeichnen Sie ein einfaches Zeilendiagramm

Lassen Sie uns die zum Zeichnen des Diagramms erforderlichen Parameter einstellen. Das Diagramm erfordert eine X-Achse, eine y-Achse und ein Datenfeld, das diese Achsen darstellt. In diesem Beispiel repräsentiert die x-Achse die Zeit der Stunden. Wir können die ersten und letzten Werte im Array nehmen. Auf der y-Achse reichen die möglichen Werte von Null bis zum Umsatz. Die maximalen Verkäufe können mit d3.max() festgestellt werden. Der Bereich der Achse variiert je nach Höhe und Breite des SVG -Elements.

Mit den obigen Werten müssen D3 die Achse mit der gewünschten Richtung und Anzahl der Skalen zeichnen lassen. Schließlich müssen wir eine Funktion unter Verwendung von d3.svg.line() definieren, um Linien basierend auf der oben definierten Skala zu zeichnen. Alle oben genannten Komponenten müssen an das SVG -Element in der Anweisungsvorlage angebracht werden. Beim Anbringen von Elementen können wir Stile und Transformationen auf Diagramme anwenden. Der folgende Code legt die Parameter fest und findet sie an SVG an:

function setChartParameters(){
  xScale = d3.scale.linear()
             .domain([salesDataToPlot[0].hour, salesDataToPlot[salesDataToPlot.length - 1].hour])
             .range([padding + 5, rawSvg.clientWidth - padding]);

              yScale = d3.scale.linear()
                .domain([0, d3.max(salesDataToPlot, function (d) {
                  return d.sales;
                })])
             .range([rawSvg.clientHeight - padding, 0]);

  xAxisGen = d3.svg.axis()
               .scale(xScale)
               .orient("bottom")
               .ticks(salesDataToPlot.length - 1);

  yAxisGen = d3.svg.axis()
               .scale(yScale)
               .orient("left")
               .ticks(5);

  lineFun = d3.svg.line()
              .x(function (d) {
                return xScale(d.hour);
              })
              .y(function (d) {
                return yScale(d.sales);
              })
              .interpolate("basis");
}

function drawLineChart() {

  setChartParameters();

  svg.append("svg:g")
     .attr("class", "x axis")
     .attr("transform", "translate(0,180)")
     .call(xAxisGen);

   svg.append("svg:g")
      .attr("class", "y axis")
      .attr("transform", "translate(20,0)")
      .call(yAxisGen);

   svg.append("svg:path")
      .attr({
        d: lineFun(salesDataToPlot),
        "stroke": "blue",
        "stroke-width": 2,
        "fill": "none",
        "class": pathClass
   });
}

drawLineChart();

Echtzeit-Update von Diagrammen

Wie bereits erwähnt, möchten unsere Benutzer mit den Funktionen der heutigen Netzwerke sofort bei der Änderung der zugrunde liegenden Daten Datendiagrammaktualisierungen sehen. Änderungen können mithilfe von Technologien wie WebSocket an den Kunden übertroffen werden. Die gerade erstellte Diagrichtungsrichtlinie sollte in der Lage sein, auf diese Änderungen zu reagieren und das Diagramm zu aktualisieren.

Um Daten über WebSocket zu drücken, benötigen wir Serverkomponenten, die mit Socket.io und Node.js, SignalR und .NET oder anderen Plattformen erstellt wurden. In dieser Demo verwende ich den $interval -Service von AneignJS, um zehn zufällige Verkaufswerte mit einer Sekunde Verzögerung in das Verkaufsarray zu bringen:

$interval(function() {
  var hour = $scope.salesData.length + 1;
  var sales = Math.round(Math.random() * 100);

  $scope.salesData.push({hour: hour, sales: sales});
}, 1000, 10);

Um das Diagramm unmittelbar nach dem Drücken neuer Daten zu aktualisieren, müssen wir das Diagramm mit den aktualisierten Daten neu zeichnen. Ein Sammlungsbeobachter muss in der Richtlinie verwendet werden, um Änderungen der Sammeldaten zu überwachen. Wenn Änderungen an der Sammlung vorgenommen werden, wird der Beobachter aufgerufen. Das Diagramm wird im Beobachter neu gezeichnet.

scope.$watchCollection(exp, function(newVal, oldVal) {
  salesDataToPlot = newVal;
  redrawLineChart();
});

function redrawLineChart() {

  setChartParameters();
  svg.selectAll("g.y.axis").call(yAxisGen);
  svg.selectAll("g.x.axis").call(xAxisGen);

  svg.selectAll("." + pathClass)
     .attr({
       d: lineFun(salesDataToPlot)
     });
}

Schlussfolgerung

AngularJS und D3 sind sehr nützliche Bibliotheken für den Aufbau reicher Geschäftsanwendungen im Web. Wir haben besprochen, wie man sie zusammen verwendet, um ein einfaches Diagramm zu erstellen. Sie können dieses Wissen erweitern, um Diagramme für Ihre Anwendung zu erstellen.

(Aufgrund von Platzbeschränkungen wird der FAQs -Teil hier weggelassen. Der Inhalt des FAQs -Teils stimmt mit dem Originaltext überein und erfordert kein Umschreiben.)

Das obige ist der detaillierte Inhalt vonErstellen von Charting -Direktiven mit AngularJS und D3.Js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!