Wraz z wydaniem kątowej wersji 14 wprowadzono autonomiczne komponenty, a NgModule stał się opcjonalny; ułatwiając nowy sposób budowania i strukturyzacji bazy kodu.

W tym artykule utworzymy wykres i zobaczymy, jak używać i integrować samodzielne komponenty Angular wraz z oficjalnym opakowaniem Angular Highcharts .

Zaczynamy

Aby utworzyć projekt z najnowszą wersją Angular, na początek zaktualizuj pakiet angular-cli za pomocą następujących poleceń:
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

Do tego projektu używamy:

• Kątowy 14.
• Wysokie wykresy V10.1.0.
• Highcharts-Angular .

• Węzeł: 14.17.0
• npm 8.3.1
• Angular CLI: 14.0.2.

1. Jeśli nie znasz tego typu środowiska, oficjalna dokumentacja Angular opisuje, jak skonfigurować lokalny obszar roboczy środowiska i więcej informacji na temat autonomicznego komponentu .

2. Aby zainstalować highcharts-angulari uruchomić bibliotekę Highcharts wykonaj następującą instrukcję: npm install highcharts-angular --save.

3. Aby zaimportować pakiet przejdź do app.module.tspliku i zaimportuj moduł HighchartsChartModulez highcharts-angularpakietu.

4. Aby zbudować wykresy Highcharts, zainstaluj Highcharts: npm install highcharts --save.

5. Deklarujemy app.compoent.tsjako samodzielny komponent i importujemy HighchartsChartModulewewnętrzną tablicę imports zamiast NgModule (opcjonalnie). Zależności na poziomie aplikacji, takie jak trasy, konfigurowanie wstrzykiwania zależności w main.ts i na poziomie komponentu w app.component.tslub dowolnym innym komponencie.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [HighchartsChartModule],
})

import './polyfills';
import {
  bootstrapApplication
} from '@angular/platform-browser';
import {
  AppComponent
} from './app/app.component';

bootstrapApplication(AppComponent);

Zachęcamy do dzielenia się swoimi przemyśleniami i pytaniami w komentarzach poniżej.

Zajrzyj na naszego bloga i dowiedz się więcej o najlepszych wskazówkach dotyczących korzystania z Highcharts.

Autor: Haroon Ansari

Haroon Ansari jest inżynierem informatyki. Posiada wieloletnie doświadczenie w javascript, Angular i .NET. Uwielbia wizualizację danych i bierze udział w projektach open source. Śledź Haroon na Twitterze @haroonansari1 i LinkedIn