Dengan dirilisnya versi angular 14, komponen mandiri telah diperkenalkan, dan NgModule menjadi opsional; memfasilitasi cara baru untuk membangun dan menyusun basis kode.

Pada artikel ini, kita akan membuat bagan dan melihat cara menggunakan dan mengintegrasikan komponen mandiri sudut bersama dengan pembungkus resmi Highcharts Angular .

Mari kita mulai

Untuk membuat proyek dengan Angular versi terbaru, sebagai permulaan, perbarui paket angular-cli dengan perintah berikut:
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

Untuk proyek ini, kami menggunakan:

• Sudut 14.
• Grafik Tinggi V10.1.0.
• Highcharts-Angular .

• Node: 14.17.0
• npm 8.3.1
• CLI sudut: 14.0.2.

1. Jika Anda tidak terbiasa dengan jenis lingkungan ini, dokumentasi resmi Angular menjelaskan cara menyiapkan ruang kerja lingkungan lokal , dan lebih banyak lagi tentang komponen mandiri .

2. Untuk menginstal highcharts-angulardan perpustakaan Highcharts jalankan instruksi berikut: npm install highcharts-angular --save.

3. Untuk mengimpor paket buka app.module.tsfile dan impor modul HighchartsChartModuledari highcharts-angularpaket.

4. Untuk membuat bagan Highcharts, instal Highcharts: npm install highcharts --save.

5. Kami mendeklarasikan app.compoent.tssebagai komponen mandiri dan mengimpor HighchartsChartModulelarik impor di dalam, bukan NgModule (opsional). Ketergantungan tingkat aplikasi seperti rute, konfigurasi injeksi ketergantungan di main.ts dan tingkat komponen di app.component.tsatau komponen lainnya.

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

Jangan ragu untuk membagikan pemikiran dan pertanyaan Anda di komentar di bawah.

Lihat blog kami dan pelajari lebih lanjut tentang tips terbaik untuk menggunakan Highcharts.

Pengarang : Harun Ansari

Haroon Ansari adalah seorang insinyur ilmu komputer. Dia memiliki pengalaman bertahun-tahun dalam javascript, Angular, dan .NET. Dia menyukai visualisasi data dan berkontribusi pada proyek sumber terbuka. Ikuti Haroon di twitter @haroonansari1 dan LinkedIn