สร้าง pie chart อย่างง่ายด้วย Chart.js และ TypeScript

enter image description here

ในบทความนี้ เราจะมาเรียนรู้การสร้าง pie chart อย่างง่ายด้วย Chart.js และ TypeScript กันนะครับ

สร้าง project ใหม่

เปิด command line tool แล้ว CD ไปที่ folder ที่เราจะให้เป็น root ของ project สร้าง node project อย่างง่าย และใช้ค่า configuration default ด้วยคำสั่ง

npm init -y

จากนั้นให้เราติดตั้ง node package เหล่านี้ลงไปด้วยคำสั่ง npm install

npm install --save-dev @types/chart.js
npm install --save-dev @types/node
npm install --save-dev browserify
npm install --save-dev gulp
npm install --save-dev gulp-clean
npm install --save-dev natives
npm install --save-dev run-sequence
npm install --save-dev tsify
npm install --save-dev typescript
npm install --save-dev vinyl-source-stream
npm install --save-dev chart.js
npm install --save-dev chartjs-plugin-labels

สามารถแก้ไข project name, author ได้ตามที่เราต้องการ ตัวอย่าง package.json ที่ได้

package.config

{
    "name": "codesanook-examples-chart.js",
    "version": "1.0.0",
    "description": "code examples for codesanook.com blog",
    "main": "index.js",
    "scripts": {},
    "author": "Aaron",
    "license": "ISC",
    "devDependencies": {
        "@types/chart.js": "^2.7.18",
        "@types/node": "^10.10.0",
        "browserify": "^14.5.0",
        "gulp": "^3.9.1",
        "gulp-clean": "^0.4.0",
        "natives": "^1.1.5",
        "run-sequence": "^2.2.1",
        "tsify": "^3.0.4",
        "typescript": "^3.1.1",
        "vinyl-source-stream": "^2.0.0",
        "chart.js": "^2.7.2",
        "chartjs-plugin-labels": "^1.1.0"
    },
    "dependencies": {
    }
}

สร้าง index.html

สร้าง index.html file ที่เราจะแสดง chart โดยกำหนด code ดังนี้

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Learn Chart.js</title>
    </head>
    <body>
        <canvas id="myChart" style="max-width:500px;max-height:500px"></canvas>
        <script src="dist/bundle.js"></script>
    </body>
</html>

Chat จะถูกแสดงไปที่ canvas ที่ id มีค่า myChart

เริ่มต้นเขียน TypeScript กัน

สร้าง folder src

สร้าง file index.ts ที่จะเป็น main file ของ project

เริ่มจาก import class และ library ที่เราต้องใช้ที่บนสุดของ file

index.ts

import { ChartConfiguration, Chart, ChartData, ChartOptions } from "chart.js";

//import chart plugin as part of bundle.js
require('chartjs-plugin-labels')

เตรียม Data

สร้างตัวแปร data สำหรับเก็บข้อมูลจำนวนผู้ชายและผู้หญิงในระบบ ใน @types/chartjs ได้ defined interface ChartData ให้เราใช้งานได้เลย

เพิ่ม code เข้าไปใน index.ts

index.ts

let data: ChartData = {
    labels: [ //set label of each data set
        'female',
        'male',
    ],
    datasets: [{
        data: [//raw data of each set
            55, //female amount
            45 //male amount
        ],
        backgroundColor: [ //set color of each data in pie chart UI, support opacity value
            'rgba(255, 99, 132, 1)', //color for female
            'rgba(54, 162, 235, 1)' //color for male
        ]
    }]
};

ChartOptions object

ต่อไปเราจะสร้างตัวแปร chartOptions ไว้เก็บค่า options เพิ่มเติมให้กับ chart โดยเราจะปรับแต่งให้

Chart แสดง legend เหนือ pie chart chart ไม่แสดง tool tip
เวลาที่เราเอา mouse hover หรือ click ที่ chart
กำหนดค่าให้กับ plugin chartjs-plugin-labels ให้แสดง Label ใน pie chart และตำแหน่งที่แสดงอยู่นอก pie chart และค่าที่แสดงให้แสดงเป็นตัวเลข raw data ลงไป

index.ts

var chartOptions: ChartOptions = {
    legend: {
        display: true //show legend at the top of a chart
    },
    tooltips: {
        enabled: false //not show tooltips when hover a chart
    },
    plugins: { //setup chartjs-plugin-labels plug in 
        labels: [
            {
                render: 'label',
                position: 'outside'
            },
            {
                render: 'value'
            }
        ],
    }
};

ChartConfiguration object

จากนั้นสร้าง configuration object ของ chart โดยกำหนดเป็น pie เพื่อแสดง pie chart กำหนดค่า data และ option ที่เราได้สร้างไว้

index.ts

var configuration: ChartConfiguration = {
    type: 'pie',
    data: data,
    options: chartOptions
};

สร้าง Chart object

สร้างตัวแปร element และอ้างอิงถึง canvas ใน index.html สร้าง Chart object โดยส่งตัวแปร element และ configuration เข้าไป คำสั่งนี้จะแสดง Pie chart ในหน้า index.html

index.ts

let element = document.getElementById('myChart') as HTMLCanvasElement;
new Chart(element, configuration);

สร้าง gulpfile.js เพื่อเป็น build file ในการ รวม library ทุกอย่างรวมทั้ง transpile TypeScrpt เป็น file bundle.js โดยกำหนดให้ guilefile.js มี code ดังนี้

ทดสอบการแสดงผล เปิด command line tool นะครับ ถ้า Windows ก็ cmd , mac ก็ Terminal แล้ว CD ไป root ของ project ที่มี gulpfile.js อยู่ run คำสั่งต่อไปนี้

gulp compile

แล้วเปิด index.html ตัว web browser ก็จะแสดง Pie chart ขึ้นมา

enter image description here

ลองนำ Chart.js ไปประยุกต์ใช้กันดูนะครับ

ขอบคุณครับ

Download source code ตัวอย่าง