นี่คือตัวอย่างบางส่วนของไลบรารีการสร้างแผนภูมิ React พร้อมคุณสมบัติและตัวอย่างที่เกี่ยวข้อง:
1. โต้ตอบ Chartjs 2
- คุณสมบัติ: แผนภูมิหลายประเภท เช่น เส้น แท่ง พาย และอื่นๆ- ตัวอย่าง:
- แผนภูมิแท่งแนวตั้ง
- แผนภูมิแท่งแนวนอน
- แผนภูมิแท่งแบบซ้อน
- แผนภูมิแท่งแบบจัดกลุ่ม
- แผนภูมิพื้นที่
- แผนภูมิเส้น
- แผนภูมิเส้นหลายแกน
- แผนภูมิวงกลม
- แผนภูมิโดนัท
- แผนภูมิพื้นที่ขั้วโลก
- แผนภูมิเรดาร์
- แผนภูมิกระจาย
- แผนภูมิฟอง
- แผนภูมิหลายประเภท
- เหตุการณ์แผนภูมิ
- แผนภูมิอ้างอิง
- แผนภูมิไล่ระดับสี
2. โต้ตอบ Google Charts
- คุณสมบัติ: แผนภูมิหลายประเภท เช่น พื้นที่ แท่ง ฟองอากาศ และอื่นๆ- ตัวอย่าง:
- แผนภูมิพื้นที่
- แผนภูมิแท่ง
- แผนภูมิฟอง
- ปฏิทิน
- แผนภูมิเชิงเทียน
- แผนภูมิคอลัมน์
- แผนภูมิผสม
- แกนต์
- เกจ
- แผนภูมิภูมิศาสตร์
- ฮิสโตแกรม
- แผนภูมิเส้น
- แผนภูมิองค์กร
- แผนภูมิวงกลม
- ซันกี้
- แผนภูมิกระจาย
- แผนภูมิพื้นที่ขั้นบันได
- โต๊ะ
- ไทม์ไลน์
- แผนที่ต้นไม้
- ต้นไม้คำ
- ภาพเคลื่อนไหว
- เครื่องมือแก้ไขแผนภูมิ
- การควบคุม
- ปฏิสัมพันธ์
- เค้าโครง
- สเปรดชีต
- แถบเครื่องมือ
3. ApexCharts.js
- คุณสมบัติ: แผนภูมิหลายประเภท เช่น เส้น คอลัมน์ แท่ง พาย และอื่นๆ- ตัวอย่าง: รวมซอร์สโค้ดสำหรับตัวอย่างทั้งหมดเพื่อประหยัดเวลาในการพัฒนา
4. CanvasJS
- คุณสมบัติ: แผนภูมิเชิงโต้ตอบที่ตอบสนองพร้อมภาพเคลื่อนไหว การซูม การแพน เหตุการณ์ การส่งออก การเจาะลึก และการอัปเดตแบบเรียลไทม์- ตัวอย่าง:
- แผนภูมิเส้น
- แผนภูมิเส้นโค้งและเส้นขั้น
- แผนภูมิพื้นที่
- พื้นที่เส้นโค้ง, พื้นที่ซ้อนกัน, พื้นที่ซ้อนกัน 100, พื้นที่ขั้น, พื้นที่ช่วง และแผนภูมิพื้นที่เส้นโค้งช่วง
- แผนภูมิคอลัมน์
- แผนภูมิแท่ง
- คอลัมน์แบบเรียงซ้อน, คอลัมน์แบบเรียงซ้อน 100%, คอลัมน์ช่วง, แถบแบบเรียงซ้อน, แถบแบบเรียงซ้อน 100%, แถบช่วง และแผนภูมิน้ำตก
- แผนภูมิวงกลม
- แผนภูมิโดนัท / โดนัท
- แผนภูมิช่องทางและพีระมิด
- แผนภูมิเชิงเทียนและ OHLC
- แผนภูมิกระจายและแผนภูมิฟอง
- แผนภูมิกล่องและมัสสุ
- แผนภูมิเส้นข้อผิดพลาดและข้อผิดพลาด
- แผนภูมิแบบไดนามิก
- แผนภูมิหุ้นพร้อมตัวเลือกช่วง ตัวนำทาง และแผนภูมิหลายรายการ
5. TanStack/react-charts
- คุณสมบัติ: แผนภูมิหลายประเภท เช่น เส้น แท่ง ฟองอากาศ และอื่นๆ- ตัวอย่าง: รวมถึงตัวอย่างสำหรับแบบเรียบง่าย เส้น แท่ง บับเบิล พื้นที่ สไตล์ที่กำหนดเอง คำแนะนำเครื่องมือที่กำหนดเอง ตัวเลือกแกน โหมดมืด แบบประกาย การแปรง โหมดการจัดกลุ่ม ตัวเลือกคำแนะนำเครื่องมือ และอื่นๆ
ไลบรารีเหล่านี้มีตัวอย่างและเทมเพลตมากมายเพื่อช่วยให้คุณเริ่มต้นสร้างแผนภูมิในแอปพลิเคชัน React ของคุณ คุณสามารถเลือกแผนภูมิที่เหมาะกับความต้องการของคุณมากที่สุดโดยพิจารณาจากประเภทของแผนภูมิที่คุณต้องการสร้างและระดับการปรับแต่งที่คุณต้องการ[1][2][3][4][5]
การอ้างอิง:[1] https://react-chartjs-2.js.org/examples/
[2] https://www.react-google-charts.com/examples
[3] https://apexcharts.com/react-chart-demos/
[4] https://canvasjs.com/react-charts/
[5] https://codesandbox.io/examples/package/react-charts
-