บทความ IT เจ๋งๆ

หากคุณกำลังสร้าง Dashboard คงปฏิเสธไม่ได้ที่จะต้องมี Graph หรือ Chart สวยๆ ที่ช่วยนำเสนอข้อมูล/สถิติที่ซับซ้อนให้ดูเข้าใจง่ายและมีประสิทธิภาพยิ่งขึ้น วันนี้ทีมงานจึงขอแนะนำ JavaScript Libraries สำหรับสร้าง Chart สวยๆ เพื่อคุณจะได้นำไปใช้ใน Project ของคุณในอนาคต ซึ่งมีทั้งแบบ Free, Open Source และจ่ายเงินเพิ่มเพื่อใช้งานได้มากขึ้น

D3.js — Data-Driven Documents

หากจะพูดถึง Chart ชื่อของ D3.js น่าจะเป็นชื่อแรกๆ ที่หลายคนนึกถึง เริ่มต้นจากการเป็น Open Source Project โดย D3.js ได้สร้าง Feature ที่มีประสิทธิภาพหลายอย่างที่ Library อื่นๆ ไม่มี อย่างเช่น Feature "Enter and Exit" เป็นต้น ซึ่งช่วยทำให้มันเป็นหนึ่งใน Library ที่ดีที่สุดสำหรับการสร้าง Chart สำหรับ Chart ใน D3.js จะถูก Render ผ่าน HTML, SVG และ CSS คุณสามารถดู List ของ Graph ที่สร้าง ด้วย D3.js ได้ที่นี่

Google Charts

Google Charts เป็น JavaScript Library สำหรับการสร้าง Chart ได้อย่างง่ายดาย มี Pre-built Chart มากมายทั้ง Area Charts, Bar Charts, Calendar Charts, Pie Charts, Geo Charts และอื่นๆ อีกมากมาย Google charts ยังมาพร้อมกับ Option ที่สามารถ Customize ได้หลายอย่าง สำหรับ Google Charts จะถูก Render ผ่าน HTML5/SVG เพื่อให้สามารถใช้งานข้าม Browser และ Platform ต่างๆ ได้ทั้ง iPhone, iPads และ Android นอกจากนี้ยังมี VML สำหรับรองรับ IE เวอร์ชันที่เก่ากว่าด้วย คุณสามารถดูตัวอย่างได้ที่นี่

ChartJS

ChartJS เป็น Chart รูปแบบ Flat Designs ที่สวยงาม ซึ่งใช้ HTML5 canvas element ในการ Render ส่วนเรื่องการรองรับ IE เวอร์ชั่นเก่าอย่าง IE7/8 จะถูกเพิ่มเข้าไปผ่าน Polyfill ซึ่ง ChartJS charts จะเป็นแบบ Responsive อยู่แล้ว ทำให้แสดงผลได้ดีทั้งบน Mobiles/Tablets และด้วยรูปแบบของ Chart ทั้ง 6 รูปแบบ (Core, Bar, Doughnut, Radar, Line, และ Polar Area) ส่งผลให้ ChartJS เป็นหนึ่งใน Library แบบ Open Source ที่น่าใช้อีกตัวหนึ่ง

Chartist.js

Chartist.js มีการแสดงผลแบบ Responsive ที่สวยงาม ใช้ SVG ในการ Render Chart อีกทั้งยังถูก Control และ Customize ผ่าน CSS3 media queries และ Sass นอกจากนี้ Chartist.js ยังสามารถใช้สำหรับ Animations ซึ่งจะใช้กับ Browser รุ่นใหม่เท่านั้นได้อีกด้วย

n3-charts

ถ้าคุณเป็น Angular developer คุณจะพบว่า n3-charts มีประโยชน์และมีความน่าสนใจมาก โดย n3-charts ถูกสร้างขึ้นมาจาก D3.js และ Angular อีกทั้งยังมี Chart มาตรฐานต่างๆ ที่ใช้คำสั่ง Angular ในการ Customize ได้ ลองดูตัวอย่าง n3-charts ได้ที่นี่

Ember Charts

Ember Charts เป็นอีกหนึ่ง Open Source Repository ที่สร้างขึ้นจาก D3.js และ Ember.js โดยมี Chart ทั้งแบบ Time Series, Bar, Pie และ Scatter ซึ่งสามารถ Customize ได้ง่าย และใช้ SVG ในการ Render

Smoothie Charts

หากคุณต้องรับมือกับ Stream Realtime Data อยู่ละก็ Smoothie Charts น่าจะมีประโยชน์กับคุณ โดยมันใช้ HTML5 canvas element ในการ Render อีกทั้งยังเป็น JavaScript Library ที่มี Option อย่าง Delay และ Splash colors ในการสร้าง Realtime Graphs

Chartkick

Chartkick เป็น JavaScript Charting Library ที่สร้างขึ้นสำหรับ Ruby Applications โดย Chartkick มีรูปแบบ Chart ที่ใช้กันบ่อยๆ เช่น Pie, Column, Bar, Area, Geo, Timeline และ Multiple Series อีกทั้ง Chart นี้ Render โดย SVG อีกด้วย

ZingChart

ZingChart เป็น Product ที่มีทั้งความยืดหยุ่น, สามารถโต้ตอบได้, มีความรวดเร็ว, สามารถปรับขนาดได้ และมีความทันสมัยอีกด้วย โดยมีหลายบริษัทที่ใช้ Chart นี้ เช่น Apple, Microsoft, Adobe, Boeing และ Walmart อีกทั้งยังใช้ Ajax, JSON, HTML5 ในการทำ Chart ที่สวยงามได้อย่างรวดเร็ว โดยคุณสามารถทดลองใช้ ZingChart ได้ฟรี แต่ถ้าอยากใช้งานแบบครบทุก Feature จะต้องซื้อ License 

Highcharts JS

Highcharts JS เป็นอีกหนึ่ง Library ที่ได้รับความนิยมมาก ซึ่งมาพร้อมกับรูปแบบ Animation ต่างๆ มากมายที่ช่วยดึงดูดสายตาผู้เยี่ยมชมเว็บไซต์ของคุณ และเช่นเดียวกับ Chart อื่นๆ Highcharts ยังมี Pre-built Graph ที่หลากหลาย เช่น Spline, Area, Areaspline, Column, Bar, Pie, Scatter เป็นต้น หนึ่งในข้อดีของการใช้ Highcharts JS คือ สามารถทำงานร่วมกันได้กับ Browser เก่าอย่าง IE6 โดยสำหรับ Browser รุ่นใหม่ๆ จะใช้ SVG ในการ Render Graphics แต่ใน IE รุ่นเก่าจะใช้ VML ในการ Render หากใช้งานแบบ Personal usage จะสามารถใช้งานได้ฟรี แต่หากเป็น Commercial usage จะต้องจ่ายค่า License

Fusioncharts

Fusioncharts เป็นหนึ่งใน JavaScript Charting Library ทีเก่าแก่ที่สุดตัวหนึ่งซึ่งถูกปล่อยออกมาตั้งแต่ปี 2002 โดย Charts ตัวนี้ถูก Render โดยใช้ HTML5/SVG และ VML เพื่อช่วยในเรื่อง Portability และ Compatibility สำหรับ Fusioncharts มีการ Parse Data ผ่านทั้ง JSON และ XML และยังสามารถ Export Chart เหล่านี้ได้ 3 รูปแบบ ได้แก่ PNG, JPG และ PDF นอกจากนี้ยังสามารถทำงานร่วมกันได้กับ Browser ที่เก่ากว่าย้อนลงไปถึง IE6 เลยทีเดียว คุณสามารถใช้ Fusioncharts ใน Watermarked Version ได้ฟรีๆ ทั้ง Personal และ Commercial Projects แต่หากคุณไม่ต้องการ Watermarked คุณอาจต้องซื้อ License 

Flot

Flot เป็น JavaScript Charting Library ที่เก่าแก่ตัวหนึ่งสำหรับ jQuery โดยมีรูแปบบ Chart ต่างๆ ให้ใช้ทั้ง Lines, Points, Filled Areas, Bars อีกทั้งยังทำงานร่วมกันได้กับ Browser ที่เก่ากว่าย้อนลงไปถึง IE6 และ Firefox 2 อีกด้วย หากใครต้องการใช้ Flot ก็สามารถใช้ได้ฟรี แต่ก็มี Commercial Support หากต้องการใช้งานที่เพิ่มขึ้นเป็นพิเศษ และนี่คือตัวอย่างของ Graph ที่สร้างขึ้นจาก Flot

amCharts

amCharts เป็นหนึ่งใน Charting Library ที่สวยงามมากที่สุดตัวหนึ่ง โดยมันสามารถแบ่ง Chart ออกเป็น 3 แบบทั้ง JavaScript Charts, Maps Charts (amMaps) และ Stock Charts โดยตัวที่โดดเด่นคือ amMaps ซึ่งมี Feature เช่น สามารถโหลด Icons หรือ Photos เพิ่มเติมจาก Map ของคุณ, มี Heatmaps, สามารถวาดเส้นและเพิ่ม Text บน Maps, การ Zoom รวม Feature ทั้งอื่นๆ อีกมากมาย สำหรับ amCharts จะใช้ SVG ในการ Render Charts ซึ่งทำงานบน Browsers รุ่นใหม่ๆ หากคุณจะใช้งาน amCharts สามารถใช้ได้ฟรี แต่ต้องระบุ Backlink กลับมาที่เว็บไซต์ amCharts ด้วย แต่สำหรับ Commercial License มีราคาค่อนข้างสูงเมื่อเทียบกับ Library ตัวอื่นๆ

EJSCharts

EJSCharts เป็น Open Source Solution สำหรับทั้ง Home และ Business Data Representation และ Customization โดยผู้ผลิตระบุว่า มันเป็น Charting Library พร้อมใช้งานสำหรับองค์กร ซึ่ง Chart ของ EJSCharts สามารถดูและอ่านง่าย คุณสามารถดูตัวอย่างได้ที่นี่ สำหรับคนที่อยากใช้งานก็มีทั้ง Free version และ Paid version โดยใน Free version จะจำกัดการใช้งานได้สูงสุด 1 Chart/Page และ 2 Series/Chart

uvCharts

uvCharts เป็น Open Source JavaScript Charting Library ซึ่งอ้างว่ามี Option ในการปรับแต่งมากกว่า 100 แบบ และมี Chart ชนิดต่างๆ กว่า 12 แบบ โดย uvCharts ถูกสร้างขึ้นโดยใช้ D3.js Library โดยจะกำจัดส่วนที่ยากในการ Coding ออกไปและยังช่วยให้การ Implement Chart สามารถทำได้ง่ายขึ้น มันใช้ SVG, HTML และ CSS ในการ Render

Plotly.js

Plotly.js เป็น JavaScript Charting Library ที่เกี่ยวกับด้านวิทยาศาสตร์ตัวแรกสำหรับ Web มันเป็น Open Source ซึ่งถูกสร้างขึ้นตั้งแต่ปี 2015 แน่นอนว่าทุกคนสามารถใช้ได้ฟรีๆ Plotly.js รองรับการใช้งาน Chart ถึง 20 แบบ ทั้ง Histograms, 3d Plots, Error Bars และ Maps แถมยังมี Chart ที่เป็นมาตรฐานทั้ง Bar Charts, Line Charts และ Pie Charts อีกด้วย ลองดูตัวอย่างบางส่วนของ Graph ที่ทำขึ้นโดยใช้ Plotly.js

สรุป

ตอนนี้ก็ขึ้นอยู่กับว่า คุณจะใช้ Library ตัวไหนสำหรับ Project ของคุณ และ Library ส่วนใหญ่ที่แนะนำก็ล้วนได้รับการยอมรับจาก Stack Overflow forums เป็นอย่างดี นอกจากนี้ยังมีตัวเลือกอื่นๆ ให้คุณได้เลือกใช้งาน ดังนี้

• GoJS เป็น JavaScript Diagramming Library สำหรับ Interactive Flowcharts, Org Charts, Design Tools, Planning tools, Visual languages
• C3.js เป็น Javascript Library ที่ใช้สร้าง Chart ที่ใช้พื้นฐานจาก D3
• dimple เป็น Object-Oriented API สำหรับ Business Analytics
• Charted (โดย Medium) เป็นเครื่องมือที่สร้าง Visualizes Data ได้โดยอัตโนมัติ

ที่มา:  https://codequs.com/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

 

บทความที่เกี่ยวข้อง

• 10 เคล็ดลับ เพื่อเป็น Software Engineer หญิง ที่สุดเจ๋ง
• เคล็คลับการใช้ Visual Studio Code ให้มีประสิทธิภาพ
• ตัวอย่างการ Refactor Code ของ JavaScript โดยใช้ Class​