В этой статье блога мы углубимся в интеграцию AmCharts с Angular Universal, популярным решением серверного рендеринга (SSR) для приложений Angular. Мы рассмотрим различные методы и предоставим примеры кода, чтобы продемонстрировать, как эффективно включить AmCharts в ваш универсальный проект Angular. Давайте начнем!
Метод 1: установка AmCharts в Angular Universal
Для начала убедитесь, что у вас настроен проект Angular Universal. Затем выполните следующие действия, чтобы установить AmCharts:
-
Установить необходимые пакеты:
npm install --save @amcharts/amcharts4 @amcharts/amcharts4-angular
-
Импортируйте необходимые модули в свое универсальное приложение Angular:
import { AmChartsModule } from '@amcharts/amcharts4-angular'; @NgModule({ imports: [ // Other modules AmChartsModule, ], // Other configurations }) export class AppModule { }
Метод 2: создание базового компонента AmCharts
Далее давайте создадим базовый компонент AmCharts для отображения простой диаграммы. Вот пример:
-
Создать новый компонент:
ng generate component amchart
-
Обновите файл шаблона компонента (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>
-
Обновите файл 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, выполните следующие действия:
-
Установите следующий пакет:
npm install --save domino
-
Импортируйте и настройте пакет в файле 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. Приятного кодирования!