การติดตั้งและใช้งาน highchart ร่วมกับ angular

วันที่: 22 ก.พ. 2565 18:31 น.

การติดตั้งและใช้งาน highchart ร่วมกับ angular

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 ลองดูครับ

เรื่องอื่น ๆ ที่เกี่ยวข้อง