9 ไลบรารีจาวาสคริปต์เพื่อสร้างแผนภูมิเชิงโต้ตอบ
ดังนั้นคุณมีข้อมูลจำนวนมากพร้อมตัวแปรหลายอย่างที่คุณต้องถ่ายทอดให้คนอื่น ข้อมูลดิบที่ไม่มีการรวบรวมกันจะเป็นเรื่องยากสำหรับพวกเขาที่จะเข้าใจ นี่คือเหตุผลที่คุณต้องการความช่วยเหลือจากแผนภูมิ ในการออกแบบเว็บ, แผนภูมิเป็นหนึ่งในเครื่องมือที่ดีที่สุดสำหรับการแสดงข้อมูล. ง่ายต่อการอ่านง่ายต่อสายตาและติดตั้งง่าย.
แต่เราจะทำสิ่งต่างๆให้ดีขึ้น เพิ่มภาพเคลื่อนไหวและการโต้ตอบกับแผนภูมิเหล่านั้น, เพื่อให้ผู้อ่านไม่เพียง แต่เรียนรู้สิ่งใหม่ ๆ จากแผนภูมิ แต่ยังเล่นกับมัน จริงๆแล้วมันง่ายกว่าที่ฟังดูเพราะมีจำนวนไลบรารี JS อยู่ในนั้น ตรวจสอบพวกเขาออก.
1. แผนภูมิ JS
Chart.js เป็นไลบรารีที่ไม่มีการพึ่งพาเพื่อสร้างแผนภูมิใน 6 ชนิดที่แตกต่างกัน: แผนภูมิเส้นแผนภูมิแท่งแผนภูมิเรดาร์แผนภูมิพื้นที่ขั้วโลกแผนภูมิวงกลมและแผนภูมิโดนัท ห้องสมุดจะแบ่งตามประเภทแผนภูมิเพื่อให้หน้าของคุณไม่จมอยู่กับสิ่งที่ไม่ต้องการ รองรับการออกแบบที่ตอบสนองและคุณสามารถเปลี่ยนตัวแปรเช่นสีหรือภาพเคลื่อนไหวเพื่อกำหนดอินเทอร์เฟซแผนภูมิเอง.
2. Chartist JS
Chartist JS เป็นห้องสมุดที่ยอดเยี่ยมในการสร้างแผนภูมิตอบสนองที่ใช้ประโยชน์จาก SVG นอกเหนือจากการตอบสนองแล้ว Chartist ยังมอบความยืดหยุ่นโดยใช้การแยกข้อกังวลอย่างชัดเจน: สไตล์ด้วย CSS และการควบคุมด้วย JS เพื่อให้การปรับแต่งง่ายขึ้นไฟล์ SASS จะถูกรวมไว้ สิ่งที่ดีที่สุดคือคุณมีตัวเลือกที่ไม่ จำกัด ในการทำให้แผนภูมิของคุณเคลื่อนไหวโดยใช้ Chartist animation API, SMIL ซึ่งให้ตัวเลือกภาพเคลื่อนไหวเพิ่มเติมแก่คุณ.
3. C3 JS
C3 JS เป็นห้องสมุดสำหรับสร้างแผนภูมิตาม D3 JS มันรวมรหัสที่จำเป็นในการสร้างแผนภูมิด้วย D3 JS ดังนั้นคุณสามารถข้ามการเขียนรหัส D3 และป้อนข้อมูลของคุณ C3 มาพร้อมกับ API ที่หลากหลายที่คุณสามารถใช้เพื่อควบคุมแผนภูมิของคุณได้อย่างง่ายดาย ในการปรับแต่งแผนภูมิของคุณกำหนดสไตล์ที่คุณกำหนดเองให้กับคลาส CSS ที่กำหนด สร้างแผนภูมิจากแผนภูมิเส้นอย่างง่ายเพื่อวัดแผนภูมิ ลองดูหน้านี้เพื่อดูว่าห้องสมุดทำงานอย่างไร.
4. Flot
Flot เป็น jQuery plguin สำหรับการสร้างแผนภูมิที่มีองค์ประกอบแบบอินเทอร์แอคทีฟเช่นการเปิดหรือปิดชุดการโต้ตอบจุดข้อมูลการแพนการซูมและอื่น ๆ Flot มาพร้อมกับตัวเลือกประเภทแผนภูมิที่หลากหลายและหากคุณต้องการความสามารถเพิ่มเติมในแผนภูมิของคุณนี่คือปลั๊กอินบางส่วนที่คุณสามารถใช้ได้เช่นกัน แผนภูมิจะทำงานได้ดีกับเบราว์เซอร์ที่รองรับผ้าใบ HTML.
5. EChart
Echart เป็นห้องสมุดที่ครอบคลุมที่น่าอัศจรรย์ใจจากประเทศจีนที่รองรับหลายประเภทแผนภูมิสามารถประมวลผลข้อมูลขนาดใหญ่ (พล็อตข้อมูล 200,000 จุดบนแผนภูมิคาร์ทีเซียน), มีบริการข้ามแดนอัตโนมัติ, ความสามารถในการแยกรวมและแลกเปลี่ยนข้อมูลระหว่างแผนภูมิหลาย ๆ หนึ่งเพื่อสลับจากประเภทข้อมูลหนึ่งไปยังอีกประเภทหนึ่งได้อย่างง่ายดายและอีกมากมาย.
6. Peity
Peity จะเพิ่มแผนภูมิขนาดเล็กลงในหน้าเว็บของคุณ มันเป็นปลั๊กอิน jQuery ขนาดเล็กที่แปลงองค์ประกอบเป็นมินิ SVG แผนภูมิแท่งแผนภูมิแท่งโดนัทหรือวงกลม คุณเพียงแค่ต้องสร้างองค์ประกอบและให้คุณค่าเช่น 1/5 และโทรออก peity ( 'พาย') ในองค์ประกอบนั้นเพื่อสร้างแผนภูมิวงกลมขนาดเล็ก ตัวอย่างเช่นในการสร้างแผนภูมิโดนัทที่มีการเน้นเพียงหนึ่งในห้านี่คือ HTML:
1/5
คุณสามารถกำหนดสีแผนภูมิรัศมีความกว้างและความสูงได้ตามค่าเริ่มต้น แต่จะแสดงเป็นขนาดเล็ก.
7. DC JS
DC JS มีความคล้ายคลึงกับ C3 JS ในแง่ของเครื่องยนต์ที่ใช้ พวกเขาทั้งสองใช้ไลบรารี D3 เพื่อแสดงผลแผนภูมิใน SVG DC JS ถูกสร้างขึ้นเพื่อช่วยให้คุณเห็นภาพข้อมูลและการวิเคราะห์สำหรับเบราว์เซอร์และอุปกรณ์มือถือ เนื่องจากมันใช้ประโยชน์จาก D3 JS จึงช่วยให้คุณสามารถเพิ่มการโต้ตอบกับผู้ใช้ในแผนภูมิของคุณ DC JS เป็นห้องสมุดที่ทรงพลังหนึ่งเดียวในการสร้างแผนภูมิจากความเรียบง่ายไปจนถึงความซับซ้อนสูง.
8. Google Chart
คุณสามารถสร้างแผนภูมิเชิงโต้ตอบและเครื่องมือข้อมูลโดยใช้ Google Visualization API ผ่าน Google Chart มีแกลเลอรี่แผนภูมิเพื่อตรวจสอบความสามารถในการสร้างภาพข้อมูลของ Google Chart ในการเริ่มต้นให้ฝัง JavaScript ง่ายๆไปยังหน้าเว็บของคุณเพื่อโหลดไลบรารี Google Chart ที่คุณต้องการ จากนั้นแสดงรายการข้อมูลที่คุณต้องการสร้างแผนภูมิและทำการปรับแต่งบางอย่างผ่านตัวเลือกแผนภูมิ ในที่สุดสร้างวัตถุแผนภูมิที่มี ID และบนหน้าเว็บของคุณสร้าง NVD3 เป็นชุดของแผนภูมิและส่วนประกอบแผนภูมิที่สร้างขึ้นใหม่ด้วย D3 JS ไลบรารีนี้จึงเป็น 'เทมเพลต' ที่จะช่วยให้คุณสร้างแผนภูมิได้ง่ายขึ้น ตรวจสอบแผนภูมิตัวอย่างมากมายที่สร้างด้วย NVD3 ที่นี่.
9. NVD3
ตอนนี้อ่านแล้ว: ไลบรารี JavaScript เพื่อสร้างแผนที่แบบโต้ตอบ & ที่กำหนดเอง
