Mit der Veröffentlichung von Angle Version 14 wurden eigenständige Komponenten eingeführt und NgModule wurde optional; Erleichterung einer neuen Art des Aufbaus und der Strukturierung der Codebasis.

In diesem Artikel erstellen wir ein Diagramm und sehen, wie Sie eckige Standalone-Komponenten zusammen mit dem offiziellen Angular-Wrapper von Highcharts verwenden und integrieren .

Fangen wir an

Um ein Projekt mit der neuesten Version von Angular zu erstellen, aktualisieren Sie zunächst das Paket angle-cli mit den folgenden Befehlen:
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

Für dieses Projekt verwenden wir:

• Winkel 14.
• Highcharts V10.1.0.
• Highcharts-Angular .

• Knoten: 14.17.0
• npm 8.3.1
• Winkel-CLI: 14.0.2.

1. Wenn Sie mit dieser Art von Umgebung nicht vertraut sind, beschreibt die offizielle Angular-Dokumentation, wie Sie einen lokalen Umgebungsarbeitsbereich einrichten , und mehr über die eigenständige Komponente .

2. Um highcharts-angulardie Highcharts-Bibliothek zu installieren und auszuführen, führen Sie die folgende Anweisung aus: npm install highcharts-angular --save.

3. Um das Paket zu importieren, gehen Sie zu app.module.tsDatei und importieren Sie das Modul HighchartsChartModuleaus dem highcharts-angularPaket.

4. Um Highcharts-Charts zu erstellen, installieren Sie Highcharts: npm install highcharts --save.

5. Wir deklarieren app.compoent.tsals eigenständige Komponente und importieren das HighchartsChartModuleinterne Import-Array anstelle von NgModule (optional). Abhängigkeiten auf Anwendungsebene wie Routen, Abhängigkeitsinjektion konfigurieren in main.ts und Komponentenebene in app.component.tsoder einer anderen Komponente.

@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);

Fühlen Sie sich frei, Ihre Gedanken und Fragen in den Kommentaren unten zu teilen.

Besuchen Sie unseren Blog und erfahren Sie mehr über die besten Tipps zur Verwendung von Highcharts.

Autor: Haroon Ansari

Haroon Ansari ist Informatikingenieur. Er verfügt über langjährige Erfahrung in Javascript, Angular und .NET. Er liebt Datenvisualisierung und trägt zu Open-Source-Projekten bei. Folgen Sie Haroon auf Twitter @haroonansari1 und LinkedIn