Поиск по сайту:

Как использовать Chart.js в Angular с ng2-charts


Введение

ng2-charts — это оболочка для Angular 2+ для интеграции Chart.js в Angular.

В этом руководстве вы будете использовать Chart.js и ng2-charts для создания образцов диаграмм в приложении Angular.

Предпосылки

Для выполнения этого урока вам понадобятся:

  • Node.js установлен локально, что можно сделать, следуя инструкциям по установке Node.js и созданию локальной среды разработки.
  • Некоторое знакомство с использованием компонентов Angular может быть полезным.

Это руководство было проверено с помощью Node v14.13.1, npm v6.14.8, angular v10.1.6, chart.js v2.9.4 и <ng2-диаграммы v2.4.2.

Шаг 1 — Настройка проекта

Вы можете использовать @angular/cli для создания нового проекта Angular.

В окне терминала используйте следующую команду:

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

Это настроит новый проект Angular со стилями, установленными на «CSS» (в отличие от «Sass», «Less» или «Stylus»), без маршрутизации и пропуска тестов.

Перейдите в только что созданный каталог проекта:

  1. cd angular-chartjs-example

В папке проекта выполните следующую команду, чтобы установить chart.js:

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

Затем добавьте chart.js в свое приложение Angular, открыв angular.json в редакторе кода и изменив его, включив в него Chart.min.js. :

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

Примечание. Добавление chart.js в allowedCommonJsDependencies предотвратит предупреждение \CommonJS или AMD, что может привести к отказу от оптимизации.

Затем откройте app.module.ts в редакторе кода и измените его, чтобы импортировать ChartsModule:

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 { }

Установив этот каркас, вы можете начать работу над компонентом диаграммы.

Шаг 2 — Создание компонента диаграммы

Давайте начнем с примера, который использует некоторые параметры для передачи в качестве входных данных для построения графика значений, связанных с тремя разными учетными записями в течение четырех месяцев.

ng2-charts дает вам директиву baseChart, которую можно применить к HTML-элементу canvas.

Откройте app.component.html в редакторе кода и замените содержимое следующими строками кода:

<div style="width: 40%;">
  <canvas
    baseChart
  >
  </canvas>
</div>

Затем измените холст, чтобы передать chartType и legend:

<div style="width: 40%;">
  <canvas
    ...
    [chartType]="'line'"
    [legend]="true"
  >
  </canvas>
</div>

  • chartType: устанавливает базовый тип диаграммы. Значение может быть pie, boughnut, bar, line, polarArea, radar или horizontalBar.
  • legend: логическое значение, указывающее, следует ли отображать легенду над диаграммой.

Затем измените холст для передачи наборов данных:

<div style="width: 40%;">
  <canvas
    ...
    [datasets]="chartData"
  >
  </canvas>
</div>

Затем откройте 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'
    }
  ];
}

  • наборы данных: это должен быть массив объектов, содержащий массив данных и метку для каждого набора данных.
  • данные. В качестве альтернативы, если ваша диаграмма проста и имеет только один набор данных, вы можете использовать данные вместо наборов данных и передать в массиве точек данных.

Теперь вернитесь к app.component.html и измените холст, чтобы передать labels:

<div style="width: 40%;">
  <canvas
    ...
    [labels]="chartLabels"
  >
  </canvas>
</div>

Затем снова откройте app.component.ts в редакторе кода, чтобы определить массив, на который вы ссылаетесь в шаблоне:

// ...
export class AppComponent {
  // ...

  chartLabels = [
    'January',
    'February',
    'March',
    'April'
  ];
}

  • labels: массив меток для оси X.

Теперь вернитесь к app.component.html и измените холст, чтобы передать options:

<div style="width: 40%;">
  <canvas
    ...
    [options]="chartOptions"
  >
  </canvas>
</div>

Затем снова откройте app.component.ts в редакторе кода, чтобы определить объект, на который вы ссылаетесь в шаблоне:

// ...
export class AppComponent {
  // ...

  chartOptions = {
    responsive: true
  };
}

  • options: объект, содержащий параметры диаграммы. Подробную информацию о доступных параметрах можно найти в официальной документации Chart.js.

Перекомпилируйте ваше приложение:

  1. npm start

При посещении вашего приложения в веб-браузере (обычно localhost:4200) вы увидите диаграмму с данными для Аккаунта A, Аккаунта B и Аккаунт C за следующие месяцы: апрель, февраль, март, апрель:

Существуют дополнительные свойства и параметры, доступные для Chart.js, которые описаны в официальной документации.

Шаг 3 — Обработка chartClick и chartHover

Генерируются два события, chartClick и chartHover, которые позволяют реагировать на взаимодействие пользователя с диаграммой. Текущие активные точки и метки возвращаются как часть данных об эмитированном событии.

Давайте создадим пример добавления их на холст.

Откройте app.component.html и добавьте chartHover и chartClick:

<div style="width: 40%;">
  <canvas
    ...
    (chartHover)="onChartHover(($event)"
    (chartClick)="onChartClick(($event)"
  >
  </canvas>
</div>

Откройте app.component.ts и добавьте пользовательские функции, на которые вы ссылаетесь, из шаблона:

// ...
export class AppComponent {
  // ...

  onChartHover = ($event: any) => {
    window.console.log('onChartHover', $event);
  };

  onChartClick = ($event: any) => {
    window.console.log('onChartClick', $event);
  };
}

После перекомпиляции приложения вы увидите, что onChartHover и onChartClick зарегистрированы в ваших инструментах разработчика.

Шаг 4 — Динамическое обновление наборов данных

Одним из основных моментов использования Chart.js является возможность динамически обновлять или реагировать на данные, полученные от серверной части или от пользовательского ввода.

Давайте продолжим развивать предыдущий пример с 3 значениями счета, нанесенными на график за 4 месяца, и добавим новые точки данных за май.

Откройте 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] предоставляется как значение по умолчанию, если в newDataPoint() не передается массив.

Кроме того, в массиве набора данных не выполняется мутация. Object.assign используется для возврата новых объектов, содержащих предыдущие данные с новыми данными.

Затем откройте app.component.html и используйте пользовательскую функцию в button после canvas:

<div style="width: 40%;">
  ...

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

После повторной компиляции приложения вы увидите, что на диаграмме отображаются значения для Учетной записи A, Учетная запись B, Учетная запись C за месяц Может при нажатии кнопки Добавить точку данных.

Заключение

В этом руководстве вы использовали Chart.js и ng2-charts для создания образца диаграммы в приложении Angular.

Вместе эти библиотеки предоставляют вам возможность представлять данные современным и динамичным способом.

Если вы хотите узнать больше об Angular, ознакомьтесь с нашей темой по Angular, где вы найдете упражнения и проекты по программированию.