Angular : วิธีการสร้างแผนภูมิแบบเส้นโดยใช้ Library chart.js

ในบทความนี้จะสอนเกี่ยวกับการสร้างแผนภูมิแบบเส้น
หัวข้อจะมีดังนี้
- chart.js คืออะไร?
- ติดตั้ง Library chart.js
- สร้างแผนภูมิแบบเส้นด้วยโค้ด
*******************************************************************
chart.js คืออะไร?

chart.js คือ javascript library สำหรับการสร้างแผนภูมิเพื่อรายงานข้อมูลในรูปแบบ ต่าง ๆ และสร้างความน่าสนใจในการนำเสนอข้อมูล
*******************************************************************
ติดตั้ง Library chart.js
เปิดที่อยู่ของโฟลเดอร์ Project บน cmd แล้วใช้คำสั่งดังนี้
npm install chart.js --saveต่อมาให้เข้าไปที่โฟลเดอร์ Project เเล้วดูในโฟลเดอร์ node_modules ว่ามีโฟลเดอร์ chart.js อยู่ไหมถ้ามีโฟลเดอร์ chart.js อยู่เเสดงว่าติดตั้ง library เสร็จสิ้น

*******************************************************************
สร้างแผนภูมิแบบเส้นด้วยโค้ด
Step 1: เปิดไฟล์ app.component.ts แล้ว import library มาใช้งาน
import { Chart } from 'chart.js';Step 2: import library เสร็จต่อมาก็เขียนโค้ดดังนี้
lineChart: any = []; //ประกาศตัวแปรเก็บค่าngOnInit(){
this.lineChart = new Chart('lineChart', { // สร้าง object และใช้ชื่อ id lineChart ในการอ้างอิงเพื่อนำมาเเสดงผล
type: 'line', // ใช้ชนิดแผนภูมิแบบเส้นสามารถเปลี่ยนชิดได้
data: { // ข้อมูลภายในแผนภูมิแบบเส้น
labels: ["Jan","Feb","March","April","May","June","July","August","Sep","Oct","Nov","Dec"], // ชื่อของข้อมูลในแนวแกน x
datasets: [{ // กำหนดค่าข้อมูลภายในแผนภูมิแบบเส้น
label: 'Number of items sold in months',
data: [9,7,3,5,2,10,15,61,19,3,1,9],
fill: false,
lineTension: 0.2,
borderColor: "red", // สีของเส้น
borderWidth: 1
}]
}, options: {
title: { // ข้อความที่อยู่ด้านบนของแผนภูมิ
text: "Line Chart",
display: true
}
}, scales: { // แสดง scales ของแผนภูมิเริมที่ 0
yAxes: [{
ticks:{
beginAtZero:true
}
}]
}
})
}***** หมายเหต *****
แผนภูมิมีหลายชนิดนะครับ สามารถเลือกใช้งานได้ตามใจชอบเลย
อ่านเพิ่มเติมได้จากลิงค์ http://www.chartjs.org/docs/latest/charts/
Step 3: เปิดไฟล์ app.component.html แล้วเขียนโค้ดดังนี้
<div style="padding-left: 550px">
<div style="width: 1200px; height: 50%;"> <!-- ขนาดความกว้างและสูงของแผนภูมิ-->
<canvas id="lineChart"></canvas> <!-- ใช้ id ในการอ้างอิงเพื่อนำแสงผลที่ได้ทำการสร้างไว้ในหน้า app.component.ts -->
</div>
</div>มาดูผลลัพธ์จากการสร้างแผนภูมิแบบเส้นด้วยโค้ด

ลองทดสอบเปลี่ยนชนิดของแผนภูมิจากชนิดแบบเส้นเปลี่ยนเป็นแบบบาร์

เสร็จเเล้ววววววการสร้างแผนภูมิแบบเส้น
******************************************************************
เครื่องมือ
- Angular Cli
- Library chart.js
Link ตัวอย่าง : https://github.com/nitassrisanoi/Angular-Create-a-Simple-Chart-