ไลบรารีแผนภูมิ JavaScript: 13 ตัวเลือกยอดนิยม

#1 – Chart.js

Chart.js เป็นไลบรารีการสร้างแผนภูมิที่ใช้งานได้จริงซึ่งใช้ <canvas> ของ HTML5 เพื่อแสดงแผนภูมิ

ไลบรารีเป็นตัวเลือกอันดับต้นๆ สำหรับโปรเจ็กต์ธรรมดาๆ อย่างง่ายดาย ด้วยเหตุผลต่างๆ เช่น ไลบรารีจะตอบสนองตามค่าเริ่มต้น และคุณยังสามารถใช้เอฟเฟกต์แอนิเมชันตามพฤติกรรมของผู้ใช้ได้อีกด้วย

ต่อไปนี้คือแผนภูมิ 8 ประเภทที่คุณสามารถสร้างด้วย Chart.js:

• แผนภูมิพื้นที่
• แผนภูมิแท่ง
• แผนภูมิฟองสบู่
• แผนภูมิโดนัทและพาย
• แผนภูมิเส้น
• ประเภทแผนภูมิผสม
• แผนภูมิพื้นที่ขั้วโลก
• แผนภูมิเรดาร์

เท่าที่ใช้งานง่าย ไวยากรณ์ก็เรียบง่าย และแม้ว่าคุณจะไม่เคยทำงานกับ JavaScript มาก่อน การสร้างแผนภูมิใหม่ก็ตรงไปตรงมา

 const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

หากคุณต้องการขยายแผนภูมิด้วยฟังก์ชันไดนามิกและการรวมข้อมูล ไลบรารีมีระบบปลั๊กอินที่คุณสามารถใช้เพื่อเพิ่มฟังก์ชันการทำงานใหม่

Chart.js ตัวอย่าง

ดูแนวคิดการพิสูจน์การใช้ปากกา: Chart.js พร้อมการไล่ระดับสีพื้นหลังโดย Sven (@hofmannsven) บน CodePen

Chart.js ทรัพยากรเพิ่มเติม

• Chart.js + Next.js = แดชบอร์ดที่ขับเคลื่อนด้วยข้อมูลที่สวยงาม
• เริ่มต้นใช้งาน Chart.js; การเรียนรู้ตามงาน

#2 – D3.js

ให้ฉันเริ่มด้วยการบอกว่า D3 เป็นเครื่องมือสร้างภาพข้อมูล แทนที่จะเป็นไลบรารีการสร้างแผนภูมิแบบเดิม

D3 ให้คุณระบุชุดข้อมูลและผูกเข้ากับ DOM หลังจากนั้น คุณสามารถใช้ฟังก์ชันไลบรารีเพื่อแปลงข้อมูลนั้นเป็นการแสดงภาพที่ไม่เหมือนใคร สำหรับการนำเสนอด้วยภาพ D3 ใช้ประโยชน์จากตาราง HTML, SVG และ <canvas> เพื่อแสดงผลข้อมูลบนหน้า

หากคุณเคยเห็นลูกโลกหมุนตามภูมิศาสตร์ที่มีจุดข้อมูลเชิงโต้ตอบหลายจุด โอกาสที่งานนำเสนอนั้นสร้างขึ้นด้วย D3 อย่างไรก็ตาม มันใช้งานได้ดีสำหรับการใช้งานจริง เช่น แผนภูมิพื้นฐานที่คุณสามารถดูในการสาธิตด้านล่าง ในท้ายที่สุด คุณจะต้องอ้างอิงถึงส่วนการสอนอย่างเป็นทางการสำหรับ D3 เพื่อสำรวจความสามารถที่ซับซ้อนยิ่งขึ้น

ตัวอย่าง D3.js

ดูแผนภูมิ Pen D3 + ReactJS โดย Web Dev (@ronaldmarin) บน CodePen

D3.js แหล่งข้อมูลเพิ่มเติม

• กวดวิชา D3.js
• การสร้างแผนที่ความหนาแน่นของปฏิทิน D3.js

#3 – Apache ECharts

เหตุผลหนึ่งที่ Apache ECharts ได้รับความนิยมมากคือคุณสามารถเข้าถึงตัวอย่างแผนภูมิที่สร้างไว้ล่วงหน้าหลายร้อยรายการได้ทันทีที่แกะออกจากกล่อง คุณสามารถตรวจสอบได้ด้วยตัวเองโดยไปที่ไดเร็กทอรี Examples หน้านี้ครอบคลุมแผนภูมิและตัวอย่างในหมวดหมู่ต่างๆ เช่น เส้น แท่ง แผนภูมิวงกลม การกระจาย แผนที่ความหนาแน่น กราฟ และอื่นๆ อีกมากมาย

และทุกตัวอย่างมีตัวอย่างโค้ด JavaScript และ TypeScript รวมอยู่ด้วย แต่นั่นไม่ใช่ทั้งหมด มีประโยชน์จริงบางประการในการใช้ไลบรารีนี้ นี่คือบางส่วนของพวกเขา:

• การสตรีมข้อมูล ต้องการสร้างแผนภูมิเชิงโต้ตอบที่มีจุดข้อมูลนับล้านหรือไม่ ECharts ใช้ WebSockets เพื่อสตรีมข้อมูล เพื่อให้สามารถโหลดแบบอะซิงโครนัสได้แม้ในชุดข้อมูลขนาดใหญ่มาก
• เป็นมิตรกับมือถือ เมื่อผู้ใช้ดู EChart บนอุปกรณ์มือถือ แผนภูมินั้นได้รับการปรับให้เหมาะสมเพื่อให้มีคุณสมบัติเชิงโต้ตอบ เช่น การซูม การแพน และการเรนเดอร์ SVG เพื่อให้แน่ใจว่าสามารถส่งมอบได้ดีที่สุด
• ข้อมูลไดนามิก คุณสามารถป้อนจุดข้อมูล ECharts ได้หลายจุด (แยกจากกัน) และไลบรารีจะสร้างภาพเคลื่อนไหวให้กับแผนภูมิโดยอัตโนมัติเพื่อให้ผู้ใช้ได้รับประสบการณ์แบบโต้ตอบ
• การเข้าถึง Apache ECharts (v4.0 ขึ้นไป) สร้างขึ้นเพื่อให้เป็นไปตามหลักเกณฑ์ของ WAI-ARIA

คุณยังสามารถแสดงแผนภูมิบนเว็บไซต์ของคุณโดยใช้ CDN ภายนอก

ตัวอย่าง Apache ECharts

ดูตัวอย่าง Pen Apache Echart โดย Vale (@vsigno) บน CodePen

Apache ECharts ทรัพยากรเพิ่มเติม

• สร้าง GitHub Insight Tool ที่ดีขึ้นในหนึ่งสัปดาห์

#4 – พล็อตเรื่อง

Plotly เป็นบริษัทแม่ของ Dash ซึ่งเป็นโซลูชันแบบ low-code สำหรับการปรับใช้แอปพลิเคชันข้อมูล และพวกเขาพัฒนาห้องสมุดกราฟของตนเอง – Plotly – ในสถานที่

ด้วย Plotly คุณสามารถสร้างการแสดงภาพแผนภูมิพื้นฐานที่สุดได้ แต่พลังที่แท้จริงของไลบรารีอยู่ที่ความสามารถในการสร้างแผนภูมิตามสถิติ การแสดงข้อมูล 3 มิติ และแผนภูมิตามข้อมูลทางการเงิน

สามารถใช้ได้ทั้งแบบโมดูล Node.js แต่ยังสามารถใช้ได้โดยตรงจาก CDN

ตัวอย่างพล็อต

ดูคำอธิบายประกอบของ Pen Add เมื่อคลิกโดย plotly (@plotly) บน CodePen

#5 – เฟรปเป้

ไลบรารีแผนภูมิ Frappe สร้างขึ้นโดยผู้ที่สร้าง Frappe Framework ห้องสมุดนี้เรียบง่ายตามที่ได้รับ และความเรียบง่ายนั้นเป็นปัจจัยสำคัญที่ทำให้ห้องสมุดได้รับความนิยม

ไลบรารีไม่ต้องการการพึ่งพาจากภายนอก และสามารถแสดงแผนภูมิ SVG ที่เหมาะกับอุปกรณ์เคลื่อนที่ได้ในโค้ดเพียงไม่กี่บรรทัด นี่คือตัวอย่างโค้ดสำหรับแผนภูมิแกนพื้นฐาน:

 data = { labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { values: [18, 40, 30, 35, 8, 52, 17, -4] } ] } new frappe.Chart( "#chart", { data: data, type: 'bar', height: 180, colors: ['red'] });

และตัวอย่างเล็ก ๆ นี้จะแปลเป็นแผนภูมิดังนี้:

นอกจากนี้ยังมีการรองรับแผนภูมิแบบผสม (หลายแผนภูมิในที่เดียว) คำอธิบายประกอบ แผนที่ความหนาแน่น และ API ที่พร้อมใช้งานหากคุณวางแผนที่จะอัปเดตข้อมูลในแบบเรียลไทม์หรือส่งออก

ตัวอย่าง Frappe

ดู Pen Frappe Hello World โดย Jang Rush (@อ่อนแอ) บน CodePen

#6 – ApexCharts

ApexCharts เป็นไลบรารีการสร้างแผนภูมิแบบดั้งเดิมเป็นอย่างมาก ความแตกต่างที่สำคัญระหว่าง ApexCharts และ Frappe (ตัวอย่าง) คือ ApexCharts มีการสาธิตเพิ่มเติมเล็กน้อย แต่ยังให้การสนับสนุนดั้งเดิมสำหรับเฟรมเวิร์กยอดนิยมเช่น React, Vue และ Angular นอกจากนี้ยังหมายความว่าแผนภูมิสาธิตทั้งหมดมีตัวอย่างตามลำดับที่เขียนในไวยากรณ์ของกรอบงานดังกล่าว

สำหรับคุณลักษณะต่างๆ แผนภูมิทั้งหมดจะถูกสร้างขึ้นในรูปแบบ SVG และเหมาะกับอุปกรณ์เคลื่อนที่โดยค่าเริ่มต้น คุณยังสามารถใช้ประโยชน์จากคุณลักษณะต่างๆ เช่น แอนิเมชั่นที่ลื่นไหล และคำอธิบายประกอบ และปรับแต่งชุดธีมแผนภูมิของคุณโดยเลือกรูปแบบตัวอย่างจาก 10 แบบ

ตัวอย่าง ApexCharts

ดู Pen Realtime Dashboard โดย ApexCharts (@apexcharts) บน CodePen

#7 – G2

เมื่อเร็ว ๆ นี้ฉันได้พูดคุยเกี่ยวกับ Ant Design หลายครั้ง รวมถึงในบทความของฉันเกี่ยวกับไลบรารีส่วนประกอบสำหรับ React.js และ Vue Ant ไม่เพียงแต่ได้รับความนิยมอย่างมากใน GitHub เท่านั้น แต่ชุมชนต่างชื่นชอบพวกเขาในทุกภูมิภาคของโลก

และไลบรารีแผนภูมิ G2 (หรือที่เรียกว่า "Visualization Grammar") คือการนำระบบการสร้างแผนภูมิของ Ant Design ไปใช้โดยใช้ระบบการออกแบบ Ant ฉันขอแนะนำให้ตรวจสอบหน้าแรกของ AntV ซึ่งคุณจะพบไลบรารีอื่น ๆ มากมายที่เกี่ยวข้องกับการแสดงข้อมูลแบบเรียลไทม์

มักใช้เพื่อสร้างสิ่งต่างๆ เช่น แดชบอร์ดของผู้ดูแลระบบ สร้างเส้นทางข้อมูล และสร้างตัวอย่างการแสดงข้อมูลเชิงโต้ตอบโดยใช้เอ็นจินการเรนเดอร์ เอ็นจิ้นนี้สามารถแสดงแผนภูมิและเวกเตอร์ข้อมูลผ่าน WebGL, Canvas และ SVG และเนื่องจากไลบรารีเป็นแบบเสียบได้ คุณจึงสามารถปรับปรุงการนำเสนอแผนภูมิของคุณเพิ่มเติมผ่านไลบรารีที่มีประสิทธิภาพมากขึ้น เช่น D3.js (ซึ่งเราเห็นก่อนหน้านี้)

#8 – หยาบViz

ไลบรารี roughViz จาก Jared Wilber เป็นการผสมผสานระหว่าง 3 ไลบรารีที่แตกต่างกัน: D3.js, Rough.js และสะดวก – ตัวประมวลผลภาพสเก็ตช์ที่วาดด้วยมือ ดังที่คุณทราบได้จากภาพหน้าจอตัวอย่างด้านบน นี่ไม่ใช่ไลบรารีการสร้างแผนภูมิทั่วไปของคุณ roughViz สร้างขึ้นโดยมีวัตถุประสงค์เพื่อช่วยให้คุณสร้างแผนภูมิแบบวาดด้วยมือโดยใช้ JavaScript

ห้องสมุดประเภทนี้จะเป็นส่วนเสริมที่ยอดเยี่ยมสำหรับโครงการส่วนบุคคล กล่าวคือ โครงการที่ต้องการจุดประกายที่สร้างสรรค์มากกว่าวิธีการแบบมืออาชีพแบบดั้งเดิม และไวยากรณ์เองก็เรียบง่ายอย่างที่ควรจะเป็น ซึ่งสอดคล้องกับ Frappe และ ApexCharts

คุณสามารถดูได้ด้วยตัวคุณเองในการสาธิตด้านล่าง

ตัวอย่างคร่าวๆ

ดูการสาธิต Pen RoughViz โดย Danny Englishby (@DanEnglishby) บน CodePen

#9 – ชาร์ตน้ำหนักเบา

หากคุณกำลังทำงานเกี่ยวกับโครงการที่เกี่ยวข้องกับการเงิน (หรือสกุลเงินดิจิทัลสำหรับเรื่องนั้น) ค่อนข้างชัดเจนว่าไลบรารีแผนภูมิที่กล่าวถึงก่อนหน้านี้จำนวนมากจะไม่ถูกตัดออก ด้วยเหตุนี้ นี่คือ Lightweight Charts – ไลบรารีการสร้างแผนภูมิที่สร้างขึ้นโดยเฉพาะสำหรับการแสดงแผนภูมิและกราฟตามการเงิน

ไลบรารีนี้ไม่เพียงแต่เป็นโอเพ่นซอร์ส และ น้ำหนักเบาเท่านั้น แต่ยังบรรจุคุณลักษณะที่จำเป็นทั้งหมดที่จำเป็นสำหรับการแสดงข้อมูลแผนภูมิเกี่ยวกับการเงินและโครงสร้างแบบไดนามิก

หนึ่งในคุณสมบัติเหล่านั้นคือการสตรีมข้อมูล ซึ่งช่วยให้คุณส่งข้อมูลแบบเรียลไทม์ไปยังแคนวาสของคุณ แล้วทำการอัปเดตโดยที่ผู้ใช้ไม่จำเป็นต้องรีเฟรชหน้า และอีกปัจจัยที่คุณอาจพิจารณาก็คือประสิทธิภาพ ซึ่งไม่น่าจะเป็นปัญหาตามที่อธิบายไว้ในหน้าแรกของห้องสมุดนี้

“โซลูชันการสร้างแผนภูมิของเราได้รับการออกแบบตั้งแต่เริ่มต้นจนถึงทำงานกับอาร์เรย์ข้อมูลขนาดใหญ่ แผนภูมิจะตอบสนองและคล่องตัวแม้มีแท่งนับพันแท่ง แม้ว่าจะมีการอัปเดตหลายครั้งต่อวินาทีด้วยขีดใหม่”

ตรวจสอบการสาธิตด้านล่างเพื่อทำความเข้าใจ แต่ยังมีตัวเลือกและคุณสมบัติแผนภูมิมากมาย

ตัวอย่างแผนภูมิน้ำหนักเบา

ดูแผนภูมิขั้นสูงของ Pen Tradingview โดย truong (@truong160196) บน CodePen

แผนภูมิน้ำหนักเบาทรัพยากรเพิ่มเติม

• แผนภูมิทางการเงินสำหรับการสมัครของคุณ

#10 – บิลบอร์ด

Billboard เป็นไลบรารีแผนภูมิอินเทอร์เฟซตาม D3 มีคุณลักษณะที่ทันสมัยทั้งหมดที่คุณคาดหวัง – การเรนเดอร์ SVG, การรองรับการสัมผัสสำหรับอุปกรณ์มือถือ, อินเทอร์เฟซที่เรียบง่าย และเอกสาร API ที่ยอดเยี่ยม

อย่างไรก็ตาม คุณลักษณะที่ฉันโปรดปรานและเนื้อหาอื่นๆ ที่น่าจะเป็นไปได้ก็คือ Billboard มีตัวอย่างแผนภูมิมากกว่า 230 ตัวอย่างที่คุณสามารถสร้างได้ด้วยห้องสมุดนี้ ตัวอย่างเหล่านี้แบ่งออกเป็นหมวดหมู่แผนภูมิ เช่น Basic, Axis, Data, Grid, Interaction, Region และอื่นๆ อีกมากมาย

ซึ่งหมายความว่าคุณไม่เพียงแต่ค้นหาประเภทแผนภูมิที่ถูกต้องสำหรับโครงการและข้อกำหนดของโครงการได้เท่านั้น แต่คุณยังสามารถสำรวจตัวเลือกอื่นๆ และดูว่าตัวอย่างเฉพาะดึงดูดความสนใจของคุณหรือไม่

Billboard.js ตัวอย่าง

ดูคำขอแผนภูมิปากกา – Billboard.js โดย DTCC (@dtcc) บน CodePen

#11 – มุมมอง

มุมมองเป็นหนึ่งในโครงการที่ FINOS (โอเพ่นซอร์ส Fintech) ดำเนินการ และ FINOS ก็เป็นส่วนหนึ่งของ Linux Foundation ด้วย เช่นเดียวกับแผนภูมิที่มีน้ำหนักเบา - Perspective.js มุ่งเน้นการให้บริการโซลูชันแผนภูมิสำหรับโครงการด้านการเงิน อย่างไรก็ตาม มันมีความสามารถมากกว่านั้น และเห็นการใช้งานบ่อยครั้งในโครงการที่เกี่ยวข้องกับอีคอมเมิร์ซ กริดข้อมูล และการแบ่งส่วนการจัดส่ง

หากคุณเคยเห็นแผนภูมิเกี่ยวกับโควิด-19 สนามบิน และการแข่งขันกีฬาสำคัญๆ เช่น โอลิมปิก มีโอกาสที่ดีที่อินเทอร์เฟซและสตรีมข้อมูลจะผสานรวมกับเปอร์สเปคทีฟ มีส่วนต่อประสานผู้ใช้ที่หลากหลาย ปรับให้เหมาะสมสำหรับสตรีมข้อมูลและการวิเคราะห์ตามเวลาจริงที่ซับซ้อน

พร้อมใช้งานสำหรับนักพัฒนา JavaScript และ Python และใช้องค์ประกอบเว็บองค์ประกอบที่กำหนดเอง

#12 – แผนภูมิ UI ของ Toast

หากมีสิ่งใด ไลบรารีการสร้างแผนภูมิ Toast UI ก็เป็นอีกทางเลือกหนึ่งที่ควรพิจารณาถึงสไตล์ของแผนภูมิและการออกแบบ ฟังก์ชันการทำงานที่นี่คล้ายกับไลบรารีที่เราเคยดูไปแล้วมาก

ฉันคิดว่าพื้นที่ที่ Toast UI แตกต่างจากตัวเลือกอื่นคือข้อกำหนด API อาจเป็นหนึ่งใน API ที่ดีกว่าที่คุณสามารถรับมือได้ และมาพร้อมกับเอกสารเชิงลึกฟรี คุณลักษณะหนึ่งของ API คือ Instances ซึ่งเป็นวิธีที่คุณจะเปลี่ยนข้อมูลแผนภูมิแบบไดนามิกได้ เนื่องจากแหล่งข้อมูลของคุณมีการเปลี่ยนแปลง หรือเนื่องจากการป้อนข้อมูลของผู้ใช้

ประเภทแผนภูมิที่ Toast รองรับ ได้แก่ แท่ง คอลัมน์ เส้น พื้นที่ ฟองอากาศ แผนที่ต้นไม้ เรดาร์ แถบรัศมี และอื่นๆ วิธีที่ต้องการในการใช้ไลบรารีนี้คือผ่าน npm แต่มี CDN และสิ่งที่คุณต้องทำคือระบุคอนเทนเนอร์ div id="chart" สำหรับตำแหน่งที่คุณต้องการให้แผนภูมิแสดง

#13 – ชาร์ตใหม่

หากคุณกำลังทำงานกับ React.js เป็นหลัก ไลบรารี Recharts จะถูกสร้างขึ้นบน D3.js พร้อมด้วย React โดยยึดตามสถาปัตยกรรมส่วนประกอบ React.js ดั้งเดิม และแผนภูมิที่สร้างด้วย Recharts สามารถแยกและนำกลับมาใช้ใหม่เป็นส่วนประกอบแต่ละรายการในหน้าที่คุณต้องการได้

ตัวอย่างแผนภูมิทั้งหมดมีโครงสร้างองค์ประกอบที่เขียนไว้ล่วงหน้า ในกรณีที่คุณต้องการลองใช้ในโครงการที่มีอยู่ ห้องสมุดเปิดตัวครั้งแรกในปี 2559 แต่ยังอยู่ระหว่างการพัฒนา

ตัวอย่างการรีชาร์ต

ดู Pen ReCharts โดย binu (@binutomy) บน CodePen