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!