ด้วยการเปิดตัวเวอร์ชันเชิงมุม 14 ส่วนประกอบแบบสแตนด์อโลนได้รับการแนะนำและNgModuleกลายเป็นตัวเลือก อำนวยความสะดวกด้วยวิธีใหม่ในการสร้างและจัดโครงสร้างโค้ดเบส

ในบทความนี้ เราจะสร้างแผนภูมิและดูวิธีใช้และรวมส่วนประกอบเชิงมุมแบบสแตนด์อโลนพร้อมกับHighcharts Angular wrapper อย่างเป็นทางการ

มาเริ่มกันเลย

หากต้องการสร้างโปรเจ็กต์ด้วย Angular เวอร์ชันล่าสุด สำหรับผู้เริ่มต้นให้อัปเดตแพ็คเกจ angular-cli ด้วยคำสั่งต่อไปนี้:
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

สำหรับโครงการนี้ เราใช้:

• เชิงมุม 14.
• Highcharts V10.1.0
• Highcharts-เชิงมุม

• โหนด: 14.17.0
• npm 8.3.1
• CLI เชิงมุม: 14.0.2.

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เข้าอาร์เรย์นำเข้าภายในแทน NgModule (ทางเลือก) การพึ่งพาระดับแอปพลิเคชัน เช่น เส้นทาง การแทรกการพึ่งพากำหนดค่าใน main.ts และระดับคอมโพเนนต์ในapp.component.tsหรือคอมโพเนนต์อื่นๆ

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

อย่าลังเลที่จะแบ่งปันความคิดและคำถามของคุณในความคิดเห็นด้านล่าง

ตรวจสอบบล็อกของเราและเรียนรู้เพิ่มเติมเกี่ยวกับเคล็ดลับที่ดีที่สุดในการใช้ Highcharts

ผู้เขียน: ฮารูน อันซารี

Haroon Ansari เป็นวิศวกรวิทยาการคอมพิวเตอร์ เขามีประสบการณ์หลายปีใน javascript, Angular และ .NET เขาชอบการแสดงข้อมูลเป็นภาพและมีส่วนร่วมในโครงการโอเพ่นซอร์ส ติดตาม Haroon บน Twitter @haroonansari1 และLinkedIn