Изучение интеграции AmCharts с Angular Universal: подробное руководство

В этой статье блога мы углубимся в интеграцию AmCharts с Angular Universal, популярным решением серверного рендеринга (SSR) для приложений Angular. Мы рассмотрим различные методы и предоставим примеры кода, чтобы продемонстрировать, как эффективно включить AmCharts в ваш универсальный проект Angular. Давайте начнем!

Метод 1: установка AmCharts в Angular Universal
Для начала убедитесь, что у вас настроен проект Angular Universal. Затем выполните следующие действия, чтобы установить AmCharts:

  1. Установить необходимые пакеты:

    npm install --save @amcharts/amcharts4 @amcharts/amcharts4-angular
  2. Импортируйте необходимые модули в свое универсальное приложение Angular:

    import { AmChartsModule } from '@amcharts/amcharts4-angular';
    @NgModule({
    imports: [
    // Other modules
    AmChartsModule,
    ],
    // Other configurations
    })
    export class AppModule { }

Метод 2: создание базового компонента AmCharts
Далее давайте создадим базовый компонент AmCharts для отображения простой диаграммы. Вот пример:

  1. Создать новый компонент:

    ng generate component amchart
  2. Обновите файл шаблона компонента (amchart.comComponent.html), добавив следующий код:

    <am4charts-chart [id]="'chart-div'" [width]="'100%'" [height]="'500px'">
    <am4charts-pie-series [data]="chartData" valueField="value" categoryField="category"></am4charts-pie-series>
    </am4charts-chart>
  3. Обновите файл TypeScript компонента (amchart.comComponent.ts), добавив следующий код:

    import { Component, OnInit } from '@angular/core';
    import { Am4ChartsService, Am4ChartsModule } from '@amcharts/amcharts4-angular';
    @Component({
    selector: 'app-amchart',
    templateUrl: './amchart.component.html',
    styleUrls: ['./amchart.component.css']
    })
    export class AmchartComponent implements OnInit {
    chartData = [
    { category: 'Category 1', value: 10 },
    { category: 'Category 2', value: 20 },
    { category: 'Category 3', value: 30 },
    ];
    constructor(private amChartsService: Am4ChartsService) { }
    ngOnInit(): void {
    this.amChartsService.useTheme(Am4ChartsModule);
    }
    }

Метод 3: рендеринг на стороне сервера с помощью Angular Universal
Angular Universal позволяет выполнять рендеринг вашего приложения на стороне сервера. Чтобы включить рендеринг на стороне сервера для AmCharts, выполните следующие действия:

  1. Установите следующий пакет:

    npm install --save domino
  2. Импортируйте и настройте пакет в файле server.ts:

    import { enableProdMode } from '@angular/core';
    import { ngExpressEngine } from '@nguniversal/express-engine';
    import * as domino from 'domino';
    // Other imports and configurations
    const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
    const win = domino.createWindow(template);
    global['window'] = win;
    global['document'] = win.document;
    app.engine('html', (_, options, callback) => {
    const engine = ngExpressEngine({
    bootstrap: AppServerModule,
    providers: [
      { provide: APP_BASE_HREF, useValue: options.req.baseUrl },
      { provide: 'REQUEST', useValue: options.req, deps: [Req] },
      // Other providers
    ],
    });
    engine(_, options, callback);
    });
    // Other server configurations

В этой статье мы рассмотрели интеграцию AmCharts с Angular Universal. Мы обсудили различные методы, включая установку AmCharts, создание базового компонента AmCharts и включение рендеринга на стороне сервера с помощью Angular Universal. Выполнив эти шаги и настроив их в соответствии с вашими конкретными требованиями, вы сможете использовать возможности AmCharts в своем универсальном проекте Angular. Приятного кодирования!