awesome

Chart.js ที่ยอดเยี่ยม

รายการสิ่งดีๆ ที่เกี่ยวข้องกับ Chart.js ที่คัดสรรมาอย่างดี

• ทรัพยากร
• แผนภูมิ
• ปลั๊กอิน
• อะแดปเตอร์
• บูรณาการ
• เครื่องมือ

รองรับ Chart.js ปัจจุบันมีการใช้งาน Chart.js หลักๆ อยู่ 3 เวอร์ชัน โปรดดูป้ายสถานะเวอร์ชันด้านล่างเพื่อตรวจสอบว่าไลบรารีรองรับเวอร์ชัน Chart.js ของคุณหรือไม่ (นอกจากนี้ "❕" หมายความว่าไม่รองรับเวอร์ชันนั้นด้วย)

• Chart.js v. 4️⃣ — เปิดตัวในเดือนพฤศจิกายน 2022
• Chart.js v. 3️⃣ — เปิดตัวในเดือนเมษายน 2021
• Chart.js v. 2️⃣ — เปิดตัวในเดือนเมษายน 2016

ทรัพยากร

• คู่มืออย่างเป็นทางการ | คู่มือผู้ใช้และไซต์เอกสารประกอบ

แผนภูมิ

สนับสนุน	ชื่อ	คำอธิบาย
2️⃣ ❕ ❕	บาร์ช่องทาง	เพิ่มประเภทแผนภูมิช่องทางแบบแท่ง
2️⃣3️⃣4️⃣	บ็อกซ์พล็อต	เพิ่มประเภทแผนภูมิพล็อตกล่องและไวโอลิน
2️⃣3️⃣4️⃣	แถบข้อผิดพลาด	เพิ่มรูปแบบแถบข้อผิดพลาดที่หลากหลายของประเภทแผนภูมิมาตรฐาน
2️⃣3️⃣ ❕	การเงิน	เพิ่มประเภทแผนภูมิทางการเงิน เช่น เชิงเทียน
❕ 3️⃣4️⃣	ช่องทาง	เพิ่มประเภทแผนภูมิช่องทาง
2️⃣3️⃣4️⃣	ภูมิศาสตร์	เพิ่มประเภทแผนภูมิแผนที่ทางภูมิศาสตร์ เช่น choropleth และแผนที่ฟอง
2️⃣3️⃣4️⃣	กราฟ	เพิ่มประเภทแผนภูมิกราฟ เช่น กราฟแบบบังคับทิศทาง
2️⃣3️⃣4️⃣	เมทริกซ์	เพิ่มประเภทแผนภูมิเมทริกซ์
2️⃣3️⃣4️⃣	พีซีพี	เพิ่มประเภทแผนภูมิพล็อตพิกัดแบบขนาน
❕ 3️⃣4️⃣	แซนกี้	เพิ่มประเภทแผนภูมิไดอะแกรม sankey
2️⃣ ❕ ❕	สมิธ	เพิ่มประเภทแผนภูมิ Smith
2️⃣3️⃣4️⃣	ซ้อนกัน100	วาดแผนภูมิแท่งแบบเรียงซ้อน 100%
2️⃣3️⃣4️⃣	แผนที่ต้นไม้	เพิ่มประเภทแผนภูมิแผนผังต้นไม้
❕ 3️⃣4️⃣	เวนน์	เพิ่มประเภทแผนภูมิเวนน์และออยเลอร์
❕ 3️⃣4️⃣	คำเมฆ	เพิ่มประเภทแผนภูมิคลาวด์คำ

ปลั๊กอิน

จัดแต่งทรงผม

สนับสนุน	ชื่อ	คำอธิบาย
❕ 3️⃣4️⃣	สีอัตโนมัติ	การสร้างสีอัตโนมัติ
2️⃣ ❕ ❕	โทนสี	เปิดใช้งานการระบายสีอัตโนมัติโดยใช้โครงร่างสีที่กำหนดไว้ล่วงหน้า
❕ 3️⃣4️⃣	การไล่ระดับสี	ไล่ระดับสีง่าย
2️⃣ ❕ ❕	ขรุขระ	วาดแผนภูมิในรูปแบบร่างที่วาดด้วยมือโดยใช้ Rough.js
2️⃣ ❕ ❕	สไตล์	มีตัวเลือกการจัดสไตล์ เช่น เงา เอียง เรืองแสง หรือเอฟเฟกต์ซ้อนทับ
❕ ❕ 4️⃣	ไทม์สแต็ค	เพิ่มการจัดรูปแบบมาตราส่วนเวลาที่มีการแบ่งเวลาแบบ "ดี"

คุณสมบัติ

สนับสนุน	ชื่อ	คำอธิบาย
2️⃣3️⃣4️⃣	คำอธิบายประกอบ	วาดเส้น กล่อง จุด ป้ายกำกับ รูปหลายเหลี่ยม และวงรีบนพื้นที่แผนภูมิ
2️⃣3️⃣ ❕	เป้าเล็ง	เพิ่มเป้าเล็งข้อมูลลงในแผนภูมิเส้นและแผนภูมิกระจาย
2️⃣3️⃣4️⃣	ป้ายกำกับข้อมูล	แสดงป้ายกำกับบนข้อมูลสำหรับแผนภูมิประเภทต่างๆ
2️⃣ ❕ ❕	ฉลากโดนัท	แสดงป้ายข้อความตรงกลางแผนภูมิโดนัท
2️⃣3️⃣4️⃣	ลำดับชั้น	เพิ่มมาตราส่วนแบบลำดับชั้นที่สามารถยุบ ขยาย และเน้นได้
❕ ❕ 4️⃣	รูปภาพฉลาก	แสดงป้ายกำกับรูปภาพบนข้อมูลสำหรับแผนภูมิโดนัท
2️⃣ ❕ ❕	แผนภูมิวงกลม-outlabels	แสดงป้ายกำกับนอกแผนภูมิวงกลม/โดนัท
2️⃣ ❕ ❕	การถดถอย	คำนวณและวาดการถดถอยทางสถิติ (เส้นแนวโน้ม)
❕ ❕ 4️⃣	เส้นแนวโน้ม	วาดเส้นแนวโน้ม
2️⃣ ❕ ❕	น้ำตก	ช่วยให้ใช้งานแผนภูมิน้ำตกได้ง่าย

การโต้ตอบ

สนับสนุน	ชื่อ	คำอธิบาย
❕ ❕ 4️⃣	a11y-ตำนาน	ให้การเข้าถึงคีย์บอร์ดสำหรับคำอธิบายแผนภูมิ
❕ 3️⃣4️⃣	ชาร์ต2มิวสิค	ปรับปรุงการเข้าถึงแผนภูมิด้วยการนำทางด้วยแป้นพิมพ์และเสียงสะท้อน
2️⃣3️⃣4️⃣	เลื่อนออกไป	เลื่อนการอัปเดตแผนภูมิเริ่มต้นจนกว่าแผนภูมิจะเลื่อนเข้าสู่วิวพอร์ต
2️⃣3️⃣4️⃣	ลากดาต้า	อนุญาตให้ผู้ใช้ลากจุดข้อมูลบนแผนภูมิ
2️⃣3️⃣4️⃣	ซูม	เปิดใช้งานการซูมและการแพนบนแผนภูมิ

แหล่งข้อมูล

สนับสนุน	ชื่อ	คำอธิบาย
2️⃣3️⃣4️⃣	แหล่งข้อมูล-โพร	แสดงอนุกรมเวลาจากโพรมีธีอุส
2️⃣3️⃣ ❕	สตรีมมิ่ง	เพิ่มการรองรับข้อมูลการสตรีมสด

นอกจากนี้ ยังพบปลั๊กอินจำนวนมากได้ในรีจิสทรี npm

อะแดปเตอร์

สนับสนุน	ชื่อ	คำอธิบาย
2️⃣3️⃣4️⃣	วันที่ fns	อะแดปเตอร์วันที่-fns
2️⃣3️⃣4️⃣	วันจ	อะแดปเตอร์ dayjs
2️⃣3️⃣4️⃣	ลักซอน	อะแดปเตอร์ Luxon
2️⃣3️⃣4️⃣	ช่วงเวลา	อะแดปเตอร์ Moment.js
❕ 3️⃣4️⃣	กาลอวกาศ	อะแดปเตอร์กาลอวกาศ

บูรณาการ

จาวาสคริปต์

สนับสนุน	ชื่อ	คำอธิบาย
2️⃣ ❕ ❕	ember-cli-chart	เอ็มเบอร์ ซีแอลไอ
❕ ❕ 4️⃣	fresh_charts	สด
2️⃣ ❕ ❕	lwcc	คอมโพเนนต์เว็บสายฟ้า
2️⃣3️⃣4️⃣	แผนภูมิ ng2	เชิงมุม v2+
2️⃣3️⃣ ❕	แผนภูมิ Omi	โอมิ
2️⃣3️⃣4️⃣	ปฏิกิริยา-chartjs-2	ตอบสนอง
❕ 3️⃣4️⃣	solid-chartjs	SolidJs
❕ 3️⃣4️⃣	svelte-chartjs	เฉียบแหลม
2️⃣3️⃣4️⃣	vue-chartjs	Vue.js

คนอื่น

สนับสนุน	ชื่อ	คำอธิบาย
❕ 3️⃣ ❕	BlazorChartjs	เบลเซอร์
❕ 3️⃣4️⃣	pax.BlazorChartJs	Blazor (พร้อมการแยก JavaScript)
2️⃣3️⃣4️⃣	ชาร์บา	GWT/J2CL
2️⃣ ❕ ❕	แผนภูมิ.java	ชวา
❕ ❕ 4️⃣	Chartjs-java-model.js	ชวา
2️⃣ ❕ ❕	Chartjs-ocaml	โอแคมล์
2️⃣3️⃣ ❕	Chartjs-ร.ร	Ruby ช่วยลดความยุ่งยากในการใช้ Chart.js ในมุมมอง Rails
❕ 3️⃣4️⃣	แผนภูมิ-js-rs	Chart.js ประเภท API ใน Rust (WIP ใน Alpha / ไม่สมบูรณ์)
2️⃣ ❕ ❕	django-chartjs	จังโก้
	ฟิกม่า	ส่วนประกอบการออกแบบ
2️⃣3️⃣4️⃣	ipychart	หลาม
2️⃣3️⃣4️⃣	laravel-chartjs	ลาราเวล
2️⃣ ❕ ❕	ทำให้เป็นของเหลว	การแสดงภาพข้อมูลสตรีมแบบมัลติเธรดที่รวดเร็วด้วย Angular
2️⃣ ❕ ❕	nova-chartjs	ลาราเวล โนวา
2️⃣3️⃣4️⃣	แผนภูมิด่วน	Web API สำหรับแผนภูมิคงที่
2️⃣ ❕ ❕	แผนภูมิชั่วร้าย	Wrapper สำหรับเว็บแอป Java
❕ 3️⃣ ❕	symfony/ux-chartjs.php	ชุด Symfony UX

เครื่องมือ

สนับสนุน	ชื่อ	คำอธิบาย
❕ 3️⃣ ❕	xhub	ส่วนขยายเบราว์เซอร์สำหรับ Chart.js (และอื่น ๆ ) บนหน้า GitHub