Использование Chart.js в Angular 13: пошаговое руководство

Чтобы использовать Chart.js в Angular 13, вы можете выполнить следующие действия:

  1. Установите Chart.js и необходимые зависимости:

    npm install chart.js ng2-charts
  2. Импортируйте необходимые модули в файл модуля Angular (например, app.module.ts):

    import { ChartsModule } from 'ng2-charts';
    @NgModule({
     imports: [
       // ...
       ChartsModule
     ],
     // ...
    })
    export class AppModule { }
  3. В файле компонента (например, chart.comComponent.ts) определите данные и параметры диаграммы:

    import { Component } from '@angular/core';
    @Component({
     selector: 'app-chart',
     template: `
       <div>
         <canvas baseChart
                 [datasets]="chartData"
                 [labels]="chartLabels"
                 [options]="chartOptions"
                 [chartType]="chartType">
         </canvas>
       </div>
     `
    })
    export class ChartComponent {
     chartData = [
       { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
       { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
       // Add more datasets as needed
     ];
     chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
     chartOptions = {
       responsive: true
       // Add more options as needed
     };
     chartType = 'bar'; // Replace with the desired chart type
    }
  4. Используйте компонент app-chartв своем шаблоне (например, app.comComponent.html):

    <app-chart></app-chart>

Это общие шаги по использованию Chart.js в Angular 13. Вы можете настроить тип диаграммы, данные и параметры в соответствии со своими требованиями.