Utilitzant Angular i Chart.js per crear gràfics en temps real

Bloc

Utilitzant Angular i Chart.js per crear gràfics en temps real

angular i Chart.js és una combinació popular quan es crea una aplicació de visualització de dades. El primer pot gestionar un gran rendiment de dades i el posterior és capaç de representar les trames en temps real, gràcies a Canvas API. En aquest post us guiaré pel procés de creació d’un gràfic en temps real mitjançant Angular i Chart.js

Requisits previs

Abans de començar a escriure qualsevol codi, assegureu-vos que teniu el següent:

  • Node.js - Faig servir la versió 13.2.0
  • CLI angular - Faig servir la versió 8.3.20
  • 10 minuts de temps lliure

S'està creant un nou projecte Angular

El primer pas necessari és crear un nou projecte Angular. Com s'esmenta als requisits previs, estic fent servir Angular CLI per fer-ho i us aconsello que feu el mateix. Obriu una finestra de terminal, aneu al directori desitjat i executeu l'ordre:

ng new angular-charts --routing=true --styling=scss

Aquesta ordre crea un nou projecte Angular anomenat gràfics angulars al directori del mateix nom. A més, he afegit dues marques opcionals - routing afegeix el mòdul del router a l'aplicació i styling defineix les extensions dels fulls d'estil utilitzats.

bloc de visualització en línia

Amb el projecte creat, obriu-lo al vostre IDE que vulgueu; utilitzaré Visual Studio Code per a això.

Afegir una capa de servei *

El següent pas d’aquest tutorial és afegir una capa de servei. He marcat aquest pas amb un asterisc, perquè és així opcional . Si ja en teniu o no en necessiteu, no dubteu en ometre aquesta secció.

Comencem aquesta secció generant un servei que donarà accés a la font de dades en temps real mitjançant Observable. Per generar un servei, utilitzeu l'ordre següent:

ng generate service sse

Després d'executar l'ordre i SseService es crea i és aquí on es col·locarà el codi de la capa de servei. Per a aquest tutorial utilitzo la font de dades SSE o Server Sent Events, tutorial on podeu trobar aquí . Si necessiteu més explicacions, no dubteu a llegir aquest tutorial. Per evitar la repetició en aquest post, només enganxaré el següent:

react-native-google-places-autocomplete
import { Injectable, NgZone } from '@angular/core'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class SseService { constructor(private _zone: NgZone) {} getServerSentEvent(url: string): Observable { return Observable.create(observer => { const eventSource = this.getEventSource(url); eventSource.onmessage = event => { this._zone.run(() => { observer.next(event); }); }; eventSource.onerror = error => { this._zone.run(() => { observer.error(error); }); }; }); } private getEventSource(url: string): EventSource { return new EventSource(url); } }

Connectant Chart.js

El següent pas és connectar la biblioteca Chart.js al nostre projecte Angular. Hi ha diverses maneres de fer-ho, però faré servir un paquet dedicat, anomenat Ng2-Gràfics . Aquest paquet exposa una API molt més agradable tot conservant totes les funcionalitats necessàries. En el meu cas, afegeixo les dependències següents al meu package.json dossier:

'chart.js': '^2.9.3', 'ng2-charts': '^2.3.0',

Després de modificar el package.json arxiu, no oblideu executar tampoc npm install o yarn en funció del gestor de paquets.

Addició de plantilla HTML

Per anar més enllà, hem d’afegir una plantilla HTML que renderitzi el gràfic. En el cas d’aquest tutorial, el podeu col·locar a qualsevol lloc que vulgueu: el codi és una única etiqueta HTML amb propietats personalitzades que explorarem al següent pas. El col·loco en una plantilla HTML de components anomenada count-events.component.html. La plantilla HTML ha d'incloure el següent:

on comprar tron

He situat el meu gràfic a la carpeta de recompte d'esdeveniments, per tant, totes les variables es preparen amb aquestes. Al canvas etiqueta especificem alçada, amplada i configuració variable, que es col·locaran a la corresponent .ts dossier.

#typescript #charts #angular #frontend #javascript

medium.com

Utilitzant Angular i Chart.js per crear gràfics en temps real

Angular i Chart.js és una combinació popular quan es crea qualsevol aplicació de visualització de dades. El primer pot gestionar un gran rendiment de dades i el posterior és capaç de representar les trames en temps real, gràcies a Canvas API.