Добавление интерактивных диаграмм Angular в компоненты ng-bootstrap

В этом уроке по диаграммам Angular 14 мы узнаем, как добавить диаграммы для отображения данных во вкладках ng-bootstrap. Диаграмма — это графическое представление данных, они обобщают большие данные или информацию в наглядной и понятной форме. Будучи веб-дизайнером/разработчиком, человек, очевидно, в какой-то момент времени будет работать с приборными панелями. Приборные панели предоставляют много информации с помощью диаграмм. В этом уроке я покажу, как добавить диаграмму CanvasJS в ng-bootstrap navs (tabs). Я создал приложение на Angular 14, но CanvasJS & ng-bootstrap работает на разных версиях angular. CanvasJS — это надежная библиотека диаграмм для веб-дизайнеров и разработчиков. Компонент Chart поддерживает более 30 типов графиков, отзывчив, интерактивен, легко настраивается и позволяет создавать красивые графики, которые могут соответствовать дизайну вашей веб-страницы / приложения.

Примечание: Этот учебник был создан с использованием последних версий на момент написания статьи:
— Angular: v14.0.0
— Ng-bootstrap: v13.0.0
— CanvasJS Charts: v3.6.7

Создайте приложение Angular и добавьте ng-bootstrap

1. Создайте ангулярный проект

Создайте новый ангулярный проект с помощью Angular CLI. Проигнорируйте этот шаг, если у вас уже есть приложение.

ng new angular-bootstrap-charts

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

2. Добавьте в проект компоненты ангулярной диаграммы ng-bootstrap & CanvasJS

После создания проекта angular добавьте в него компоненты ng-bootstrap & CanvasJS angular charts. ng-bootstrap можно добавить либо с помощью Angular CLI, либо вручную, просто выполнив ‘npm install package-name’. Ниже приведены синтаксисы для обоих подходов.

/* Angular CLI Way */
ng add @ng-bootstrap/ng-bootstrap

/* Manual Way */
npm install @ng-bootstrap/ng-bootstrap --save

Ангулярные графики CanvasJS можно скачать с их официального сайта (пакет npm не является официальным) & сохраните его в папке assets для импорта в проект.

После того как пакет установлен, давайте импортируем модуль & зарегистрируем его. Откройте файл app.module.ts & зарегистрируйте модуль.

/* app.module.ts */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;

@NgModule({
  declarations: [
    AppComponent,
    CanvasJSChart
  ],
  imports: [
    BrowserModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Добавление компонента Bootstrap Nav (Tabs)

Чтобы не усложнять, давайте добавим в приложение вкладки bootstrap. Вы можете добавить любой компонент bootstrap, например, модальный, аккордеон и т.д.

1. Добавить Bootstrap Navs

<ul ngbNav #nav="ngbNav" class="nav-tabs">
  <li [ngbNavItem]="1">
    <a ngbNavLink>Line Chart</a>
    <ng-template ngbNavContent>
    </ng-template>
  </li>
  .
  .
  .
</ul>

<div [ngbNavOutlet]="nav" class="mt-2"></div>

2. Добавить диаграмму в навигационную панель

<ul ngbNav #nav="ngbNav" class="nav-tabs">
  <li [ngbNavItem]="1">
    <a ngbNavLink>Line Chart</a>
    <ng-template ngbNavContent>
      <canvasjs-chart
      [options]="lineChartOptions"
      [styles]="{ width: '100%', height: '360px' }"
      ></canvasjs-chart>
    </ng-template>
  </li>
  .
  .
  .
</ul>

<div [ngbNavOutlet]="nav" class="mt-2"></div>

3. Показывать диаграмму только на активных вкладках

В закладках содержимое активных вкладок будет показано, а содержимое неактивных вкладок будет скрыто. Следовательно, требуется условный рендеринг, чтобы графики на неактивных вкладках не отображались. Для этого можно использовать флаг keep, который переключается, когда вкладка видна или скрыта. На основе этого флага можно отрисовать график.

<ul ngbNav #nav="ngbNav" class="nav-tabs" (shown)="navChangeEvent($event)" (hidden)="navHiddenEvent($event)">
  <li [ngbNavItem]="1">
    <a ngbNavLink>Line Chart</a>
    <ng-template ngbNavContent>
      <canvasjs-chart
      *ngIf="showChart"
      [options]="lineChartOptions"
      (chartInstance)="getChartInstance($event)"
      [styles]="{ width: '100%', height: '360px' }"
      ></canvasjs-chart>
    </ng-template>
  </li>
  .
  .
  .
</ul>

На момент написания этой статьи в проекте Angular 14 использовался CanvasJS версии 3.6.7. Однако графики CanvasJS работают во всех версиях Angular. Если вы впервые знакомитесь с угловыми диаграммами CanvasJS или API CanvasJS, или вам нужно освежить информацию, я бы рекомендовал прочитать документацию по CanvasJS Charts. А для ng-bootstrap посмотрите эту страницу документации.