11/01/2560

การติดตั้ง framework ที่ช่วยในการสร้าง Graph หรือ Chart

การแสดงผลชุดข้อมูลให้ออกมาอยู่ในรูปแบบของ Graph หรือ Chart บน  web application ในปัจจุบันนั้น มีเครื่องมือ หรือเฟรมเวิร์ค มากมายให้เลือกใช้งาน ซึ่งสำหรับการเลือกใช้งานก็แล้วแต่ความเหมาะสมกับเครื่องมือ เทคโนโลยี ของเว็บนั้นๆ หรืออาจจะแล้วแต่ความถนัดของผู้พัฒนาเอง
      สำหรับบทความนี้จะยกตัวอย่างการติดตั้ง JavaScript framework มาสามตัวอย่างคือ Chart.Js

   1 . Chart.Js 

ขั้นตอนแรกให้เข้าไป http://jquery.com/download/   เพื่อ Download ตัว jQuery มาเพื่อช่วยให้เราเขียน JavaScript ได้ง่ายขึ้น


ขั้นตอนต่อมาให้เข้าไป Download ตัว Chart.Js  http://www.chartjs.org/docs/#getting-started-download-chart-js   และคลิ้กที่ Chart.js on GitHub


ขั้นตอนต่อมาพอเข้ามาถึงหน้า GitHub ให้เลื่อน Scroll bar ลงก็จะเห็นคำว่า Download ให้คลิ้กเลือก ไฟล์ชื่อว่า Chart.min.js


ขั้นตอนต่อมาพอท่านได้ทั้ง 2 ไฟล์มาแล้วก็มาถึงขั้นตอนการติดตั้งไฟล์ลงใน project นำไฟล์ที่เรา Download ทั้งนำไปไว้ใน folder project ของท่าน เช่น projectของผมชื่อว่า GraphJs เป็นต้น


ขั้นตอนต่อมานำทั้ง2ไฟล์เก็บในfolder ชื่อว่า Js เพื่อไม่ทำให้สับสนกับไฟล์นามสกุลอื่นๆ


ขั้นตอนต่อมาคือขั้นตอนการเรียนใช้งาน ไฟล์ JavaScript ทั้ง2ไฟล์ ขั้นนี้จะยกตัวอย่างการเรียกมาใช้ในไฟล์index.html  เปิดไฟล์ index.html ขึ้น


ทำการเรียกใช้งานทั้ง2ไฟล์โดยการเขียนโค้ด Include แบบ src path  เช่นจะเขียนตามการเก็บไฟล์ไว้
<script type ="text/javascript" src="Js/jquery-3.1.0.min.js"></script>
<script type ="text/javascript" src="Js/Chart.min.js"></script>
จะเห็นว่า src = "" ในเครื่องหมาย "" ให้เราเขียนตำแหน่งที่เราเก็บไฟล์ไว้ จากขั้นตอนข้างต้นที่เราทำมาจะเห็นได้ว่าเราเก็บไฟล์ไว้ที่ folder Js


ทั้งหมดคือการติดตั้งและเรียกใช้ JavaScript Chart.Js

ไม่มีความคิดเห็น:

แสดงความคิดเห็น