Với việc phát hành phiên bản góc cạnh 14, các thành phần độc lập đã được giới thiệu và NgModule trở thành tùy chọn; tạo điều kiện cho một cách mới để xây dựng và cấu trúc cơ sở mã.

Trong bài viết này, chúng ta sẽ tạo một biểu đồ và xem cách sử dụng và tích hợp các thành phần độc lập của góc cùng với trình bao bọc Góc chính thức của Highcharts .

Hãy bắt đầu nào

Để tạo một dự án với phiên bản Angular mới nhất, để bắt đầu, hãy cập nhật gói angular-cli bằng các lệnh sau:
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

Đối với dự án này, chúng tôi đang sử dụng:

• Góc 14.
• Biểu đồ cao V10.1.0.
• Highcharts-Angular .

• Nút: 14.17.0
• chiều 8.3.1
• CLI góc: 14.0.2.

1. Nếu bạn không quen với loại môi trường này, tài liệu chính thức của Angular mô tả cách thiết lập không gian làm việc của môi trường cục bộ và thông tin khác về thành phần độc lập .

2. Để cài đặt highcharts-angularvà chạy thư viện Highcharts bạn làm theo hướng dẫn sau: npm install highcharts-angular --save.

3. Để nhập gói, hãy chuyển đến app.module.tstệp và nhập mô-đun HighchartsChartModuletừ highcharts-angulargói.

4. Để tạo biểu đồ Highcharts, hãy cài đặt Highcharts: npm install highcharts --save.

5. Chúng tôi đang khai app.compoent.tsbáo là một thành phần độc lập và nhập HighchartsChartModulemảng nhập khẩu bên trong thay vì NgModule (tùy chọn). Các thành phần phụ thuộc ở cấp độ ứng dụng, chẳng hạn như các tuyến đường, cấu hình nội xạ phụ thuộc trong main.ts và cấp độ thành phần trong app.component.tshoặc bất kỳ thành phần nào khác.

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

Hãy chia sẻ suy nghĩ và câu hỏi của bạn trong các ý kiến ​​​​dưới đây.

Kiểm tra blog của chúng tôi và tìm hiểu thêm về các mẹo tốt nhất để sử dụng Highcharts.

Tác giả: Haroon Ansari

Haroon Ansari là một kỹ sư khoa học máy tính. Anh ấy có nhiều năm kinh nghiệm về javascript, Angular và .NET. Anh ấy thích trực quan hóa dữ liệu và đóng góp cho các dự án mã nguồn mở. Theo dõi Haroon trên twitter @haroonansari1 và LinkedIn