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

Nitas Srisanoi
Sep 4, 2018 · 2 min read

ในบทความนี้จะสอนเกี่ยวกับการสร้างแผนภูมิแบบเส้น
หัวข้อจะมีดังนี้

  • chart.js คืออะไร?
  • ติดตั้ง Library chart.js
  • สร้างแผนภูมิแบบเส้นด้วยโค้ด

*******************************************************************

chart.js คืออะไร?

https://www.chartjs.org/

chart.js คือ javascript library สำหรับการสร้างแผนภูมิเพื่อรายงานข้อมูลในรูปแบบ ต่าง ๆ และสร้างความน่าสนใจในการนำเสนอข้อมูล

*******************************************************************

ติดตั้ง Library chart.js

เปิดที่อยู่ของโฟลเดอร์ Project บน cmd แล้วใช้คำสั่งดังนี้

npm install chart.js --save

ต่อมาให้เข้าไปที่โฟลเดอร์ Project เเล้วดูในโฟลเดอร์ node_modules ว่ามีโฟลเดอร์ chart.js อยู่ไหมถ้ามีโฟลเดอร์ chart.js อยู่เเสดงว่าติดตั้ง library เสร็จสิ้น

โฟลเดอร์ chart.js

*******************************************************************

สร้างแผนภูมิแบบเส้นด้วยโค้ด

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-

    Nitas Srisanoi

    Written by

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade