นี่คือตัวอย่างบางส่วนของไลบรารีแผนภูมิปฏิกิริยาที่มีคุณสมบัติและตัวอย่างตามลำดับ:
1. React Chartjs 2
- ฟีเจอร์: แผนภูมิประเภทต่างๆเช่นเส้นบาร์พายและอื่น ๆ- ตัวอย่าง:
- แผนภูมิแถบแนวตั้ง
- แผนภูมิบาร์แนวนอน
- แผนภูมิแท่งซ้อนกัน
- แผนภูมิบาร์จัดกลุ่ม
- แผนภูมิพื้นที่
- แผนภูมิเส้น
- แผนภูมิสายหลายแกน
- แผนภูมิวงกลม
- แผนภูมิโดนัท
- แผนภูมิพื้นที่ขั้วโลก
- แผนภูมิเรดาร์
- แผนภูมิกระจาย
- แผนภูมิฟอง
- แผนภูมิ MultityPe
- เหตุการณ์แผนภูมิ
- แผนภูมิอ้างอิง
- แผนภูมิการไล่ระดับสี
2. ตอบสนองแผนภูมิ Google
- คุณสมบัติ: แผนภูมิประเภทต่างๆเช่นพื้นที่บาร์ฟองสบู่และอื่น ๆ- ตัวอย่าง:
- แผนภูมิพื้นที่
- แผนภูมิบาร์
- แผนภูมิฟอง
- ปฏิทิน
- แผนภูมิเชิงเทียน
- แผนภูมิคอลัมน์
- แผนภูมิคอมโบ
- กานท์
- มาตรวัด
- แผนภูมิ GEO
- ฮิสโตแกรม
- แผนภูมิเส้น
- แผนภูมิองค์กร
- แผนภูมิวงกลม
- Sankey
- แผนภูมิกระจาย
- แผนภูมิพื้นที่ก้าว
- โต๊ะ
- เส้นเวลา
- แผนที่ต้นไม้
- ต้นไม้คำ
- ภาพเคลื่อนไหว
- โปรแกรมแก้ไขแผนภูมิ
- การควบคุม
- ปฏิสัมพันธ์
- เค้าโครง
- สเปรดชีต
- แถบเครื่องมือ
3. apexcharts.js
- คุณสมบัติ: แผนภูมิประเภทต่างๆเช่นบรรทัด, คอลัมน์, บาร์, พายและอื่น ๆ- ตัวอย่าง: รวมถึงซอร์สโค้ดสำหรับตัวอย่างทั้งหมดเพื่อประหยัดเวลาในการพัฒนา
4. Canvasjs
- คุณสมบัติ: ชาร์ตแบบโต้ตอบที่ตอบสนองพร้อมแอนิเมชั่น, ซูม, การแพน, กิจกรรม, การส่งออก, การเจาะและการอัปเดตแบบเรียลไทม์- ตัวอย่าง:
- แผนภูมิเส้น
- แผนภูมิเส้นโค้งและขั้นตอน
- แผนภูมิพื้นที่
- พื้นที่ Spline, พื้นที่ซ้อน, พื้นที่ซ้อน 100, พื้นที่ขั้นตอน, พื้นที่ช่วงและแผนภูมิพื้นที่ Spline
- แผนภูมิคอลัมน์
- แผนภูมิบาร์
- คอลัมน์เรียงซ้อนคอลัมน์ซ้อน 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