С выходом версии angular 14 были введены автономные компоненты, а NgModule стал необязательным; облегчение нового способа построения и структурирования кодовой базы.
В этой статье мы создадим диаграмму и посмотрим, как использовать и интегрировать автономные компоненты Angular вместе с официальной оболочкой Highcharts Angular.
Приступим 🙂
Чтобы создать проект с последней версией Angular, для начала обновите пакет angular-cli следующими командами:npm uninstall -g @angular/cli
npm install -g @angular/cli@latest
Для этого проекта мы используем:
- Угловой 14.
- Highcharts V10.1.0.
- Highcharts-Angular.
Проект настроен с использованием среды приложения Angular и рабочей области со следующими настройками:
- Узел: 14.17.0
- нпм 8.3.1
- Угловой интерфейс командной строки: 14.0.2.
Настройте проект Angular с помощью Highcharts
1. Если вы не знакомы с этим типом среды, официальная документация Angular описывает, как настроить рабочее пространство в локальной среде, и подробнее об автономном компоненте.
2. Для установки highcharts-angular
и библиотеки Highcharts выполните следующую инструкцию: npm install highcharts-angular --save
.
3. Чтобы импортировать пакет, перейдите в файл app.module.ts
и импортируйте модуль HighchartsChartModule
из пакета highcharts-angular
.
4. Для построения диаграмм Highcharts установите Highcharts: npm install highcharts --save
.
5. Мы объявляем app.compoent.ts
отдельным компонентом и импортируем HighchartsChartModule
внутри массива imports вместо NgModule (необязательно). Зависимости уровня приложения, такие как маршруты, внедрение зависимостей, настраиваются в main.ts и уровне компонента в app.component.ts
или любом другом компоненте.
@Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], standalone: true, imports: [HighchartsChartModule], })
6. Загрузите приложение из main.ts
.
import './polyfills'; import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app/app.component'; bootstrapApplication(AppComponent);
7. Нажмите на этот Проект Stackblitz, чтобы найти полный рабочий пример с кодом. Вот окончательный результат:
Не стесняйтесь делиться своими мыслями и вопросами в комментариях ниже.
Проверьте наш блог и узнайте больше о лучших советах по использованию Highcharts.
Автор: Харун Ансари
Харун Ансари — инженер по информатике. У него многолетний опыт работы с javascript, Angular и .NET. Он любит визуализацию данных и участвует в проектах с открытым исходным кодом. Следите за Харуном в твиттере @haroonansari1 и LinkedIn.