การติดตั้งและใช้งาน highchart ร่วมกับ angular
วันที่: 22 ก.พ. 2565 18:31 น.
Highcharts คือ javascript library สำหรับสร้างกราฟบนเว็บ ซึ่งเจ้าตัว Highcharts สร้างสามารถสร้างกราฟ ได้หลายรูปแบบนะ ไม่ว่าจะเป็น กราฟแท่ง กราฟเส้น กราฟวงกลม สามารถแสดงผลได้ทุก browser รวมทั้งแสดงผลบนมือถือได้อีกด้วย ที่สำคัญสามารถใช้งานได้ฟรีครับ ในบทความเรื่องจะพานำมาใช้กับ Angular อย่างง่าย ๆ มาเริ่มกันเลยครับ
สำหรับใครยังไม่ได้ติดตั้ง angular ก็สามารถดูวิธีติดตั้ง Angularก่อนได้เลยครับ
เริ่มจากติดตั้ง hignchart เข้ากับโปรเจค angular ของเรา โดยใช้คำสั่งดังนี้
npm install highcharts highcharts-angular
จากนั้นไป import ใช้ใน app.module.ts จะได้แบบนี้
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HighchartsChartModule } from 'highcharts-angular';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HighchartsChartModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ทีนี้เราจะสามารถเรียกใช้งานได้แล้วครับ ผมจะลองสร้างกราฟวงกรมให้เป็นตัวอย่าง
ในไฟล์ app.component.ts จะเป็นโค้ดดังนี้
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-highchart';
Highcharts: typeof Highcharts = Highcharts;
chartOptions: any = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
};
}
ไฟล์ app.component.html จะได้โค้ดดังนี้ครับ
<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions"></highcharts-chart>
แค่นี้แหละครับ หน้าตาจะได้แบบนี้
การตั้งค่าและการใช้งานกราฟประเภทอื่น ๆ สามารถดูเพิ่มเติมได้ที่ https://www.highcharts.com/demo ลองดูครับ
เรื่องอื่น ๆ ที่เกี่ยวข้อง
การใช้งาน Angular ร่วมกับ Datatables เรียกใช้ข้อมูลจาก PHP และ MySQL แบบ Server-side
เมื่อวันที่: 18 ก.พ. 2565 00:42 น.
การติดตั้งและใช้งาน Datatables ร่วมกับ Angular
เมื่อวันที่: 17 ก.พ. 2565 19:17 น.
เมื่อวันที่: 16 ก.พ. 2565 16:13 น.
การใช้งาน Angular ร่วมกับ Datatables เรียกใช้ข้อมูลจาก .NET Core แบบ Server-side
เมื่อวันที่: 18 ก.พ. 2565 09:48 น.
เริ่มต้นสร้าง RESTful API ด้วย Node.js ร่วมกับ Express
เมื่อวันที่: 6 เม.ย. 2565 22:57 น.
สร้าง RESTful API เบื้องต้นสำหรับ เพิ่ม/ลบ/แก้ไข ด้วย Node.js ร่วมกับ Express
เมื่อวันที่: 7 เม.ย. 2565 23:00 น.