Cómo usar Chart.js en Angular con ng2-charts

Introducción

Chart.js es una popular biblioteca de gráficos de JavaScript y ng2-chartses un contenedor para Angular 2+ para integrar Chart.js en Angular.

En este tutorial, utilizará Chart.js ng2-chartspara crear gráficos de muestra en una aplicación Angular.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .
• Puede resultar beneficioso tener cierta familiaridad con la configuración de un proyecto Angular y el uso de componentes Angular .

Este tutorial fue verificado con Node v14.13.1, npmv6.14.8, angularv10.1.6, chart.jsv2.9.4 y ng2-chartsv2.4.2.

Paso 1: Configuración del proyecto

Puedes usarlo @angular/clipara crear un nuevo proyecto Angular.

En su ventana de terminal, utilice el siguiente comando:

npx @angular/cli new angular-chartjs-example --style=css --routing=false --skip-tests

Esto configurará un nuevo proyecto Angular con estilos establecidos en “CSS” (a diferencia de “Sass”, Less” o “Stylus”), sin enrutamiento y sin omitir pruebas.

Navegue hasta el directorio del proyecto recién creado:

cd angular-chartjs-example

Desde la carpeta de su proyecto, ejecute el siguiente comando para instalar chart.js:

npm install chart.js@2.9.4 ng2-charts@2.4.2

A continuación, agréguelo chart.jsa su aplicación Angular abriéndolo angular.jsonen su editor de código y modificándolo para incluir Chart.min.js:

angular.json

{  // ...  "projects": {    "angular-chartjs-example": {      // ...      "architect": {        "build": {          // ...          "options": {            // ...            "scripts": [              "node_modules/chart.js/dist/Chart.min.js"            ],            "allowedCommonJsDependencies": [              "chart.js"            ]          },          // ...        },      }    }},  // ...}

Nota: Agregar chart.jsa allowedCommonJsDependenciesevitará la CommonJS or AMD dependencies can cause optimization bailouts.advertencia “ ”.

Luego, ábrelo app.module.tsen tu editor de código y modifícalo para importar ChartsModule:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { ChartsModule } from 'ng2-charts';import { AppComponent } from './app.component';@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    ChartsModule  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

Con este andamiaje instalado, puedes comenzar a trabajar en el componente gráfico.

Paso 2: creación del componente gráfico

Comencemos con un ejemplo que utiliza algunas de las opciones para pasar como entradas para trazar valores asociados con tres cuentas diferentes a lo largo de cuatro meses.

ng2-chartsle proporciona una baseChartdirectiva que se puede aplicar a un canvaselemento HTML.

Ábralo app.component.htmlen un editor de código y reemplace el contenido con las siguientes líneas de código:

src/aplicación/aplicación.componente.html

div  canvas    baseChart    /canvas/div

Luego, modifica el lienzo para pasar chartTypey legend:

src/aplicación/aplicación.componente.html

div  canvas    ...    [chartType]="'line'"    [legend]="true"    /canvas/div

• chartType: Esto establece el tipo base del gráfico. El valor puede ser pie, doughnut, bar, line, polarArea, radar, o horizontalBar.
• legend:Un valor booleano que indica si se debe mostrar o no una leyenda encima del gráfico.

Luego, modifica el lienzo para pasar datasets:

src/aplicación/aplicación.componente.html

div  canvas    ...    [datasets]="chartData"    /canvas/div

A continuación, abra app.component.tsun editor de código para definir la matriz a la que hizo referencia en la plantilla:

src/app/app.component.ts

// ...export class AppComponent {  // ...  chartData = [    {      data: [330, 600, 260, 700],      label: 'Account A'    },    {      data: [120, 455, 100, 340],      label: 'Account B'    },    {      data: [45, 67, 800, 500],      label: 'Account C'    }  ];}

• datasets:Esto debe ser una matriz de objetos que contengan una matriz de datos y una etiqueta para cada conjunto de datos.
• data:Como alternativa, si su gráfico es simple y solo tiene un conjunto de datos, puede utilizar dataen lugar de datasetsy pasar una matriz de puntos de datos.

Ahora, revise app.component.htmly modifique el lienzo para pasar labels:

src/aplicación/aplicación.componente.html

div  canvas    ...    [labels]="chartLabels"    /canvas/div

A continuación, vuelva a abrir app.component.tsen un editor de código para definir la matriz a la que hizo referencia en la plantilla:

src/app/app.component.ts

// ...export class AppComponent {  // ...  chartLabels = [    'January',    'February',    'March',    'April'  ];}

• labels:Una matriz de etiquetas para el eje X.

Ahora, revise app.component.htmly modifique el lienzo para pasar options:

src/aplicación/aplicación.componente.html

div  canvas    ...    [options]="chartOptions"    /canvas/div

A continuación, vuelva a abrirlo app.component.tsen un editor de código para definir el objeto al que hizo referencia en la plantilla:

src/app/app.component.ts

// ...export class AppComponent {  // ...  chartOptions = {    responsive: true  };}

• options: Un objeto que contiene opciones para el gráfico. Puede consultar la documentación oficial de Chart.js para obtener más información sobre las opciones disponibles.

Recompila tu aplicación:

npm start

Al visitar su aplicación en un navegador web (normalmente localhost:4200), observará un gráfico con datos representados para Account A, Account By Account Cdurante los meses de April, February, March, April:

Hay propiedades y opciones adicionales disponibles para Chart.js que se tratan en la documentación oficial .

Paso 3 — Manipulación chartClickychartHover

Se emiten dos eventos, chartClicky chartHover, que proporcionan una forma de reaccionar ante la interacción del usuario con el gráfico. Los puntos y las etiquetas activos actualmente se devuelven como parte de los datos del evento emitido.

Vamos a crear un ejemplo de cómo agregarlos al lienzo.

Abrir app.component.htmly agregar chartHovery chartClick:

src/aplicación/aplicación.componente.html

div  canvas    ...    (chartHover)="onChartHover(($event)"    (chartClick)="onChartClick(($event)"    /canvas/div

Abra app.component.tsy agregue las funciones personalizadas a las que hizo referencia desde la plantilla:

src/app/app.component.ts

// ...export class AppComponent {  // ...  onChartHover = ($event: any) = {    window.console.log('onChartHover', $event);  };  onChartClick = ($event: any) = {    window.console.log('onChartClick', $event);  };}

Después de volver a compilar su aplicación, observará onChartHovere onChartClickiniciará sesión en sus herramientas de desarrollador.

Paso 4: Actualización dinámica de conjuntos de datos

Uno de los aspectos más destacados del uso de Chart.js es la capacidad de actualizar o responder dinámicamente a los datos recibidos desde un backend o desde la entrada del usuario.

Continuemos desarrollando el ejemplo anterior con los 3 valores de cuenta graficados a lo largo de 4 meses y agreguemos nuevos puntos de datos para el mes de mayo.

Abra app.component.tsy defina la función personalizada:

src/app/app.component.ts

// ...export class AppComponent {  // ...  newDataPoint(dataArr = [100, 100, 100], label) {    this.chartData.forEach((dataset, index) = {      this.chartData[index] = Object.assign({}, this.chartData[index], {        data: [...this.chartData[index].data, dataArr[index]]      });    });    this.chartLabels = [...this.chartLabels, label];  }}

[100, 100, 100]se proporciona como valor predeterminado si no se pasa ninguna matriz a newDataPoint().

Tampoco se realiza ninguna mutación en la matriz del conjunto de datos. Object.assign se utiliza para devolver nuevos objetos que contienen los datos anteriores con los nuevos datos.

Luego, abra app.component.htmly use la función personalizada después buttonde canvas:

src/aplicación/aplicación.componente.html

div  ...  button (click)="newDataPoint([900, 50, 300], 'May')"    Add data point  /button/div

Después de volver a compilar su aplicación, observará que el gráfico trazará valores para Account A, Account B, Account Cpara el mes de Maycuando interactúe con el botón Agregar punto de datos .

Conclusión

En este tutorial, utilizó Chart.js ng2-chartspara crear un gráfico de muestra en una aplicación Angular.

Juntas, estas bibliotecas le brindan el poder de presentar datos de una manera moderna y dinámica.

Si desea obtener más información sobre Angular, consulte nuestra página de temas de Angular para ver ejercicios y proyectos de programación.