Editor Ratings: User Ratings: [Total: 0 Average: 0].ilfs_responsive_below_title_1 { width: 300px; } @media (ความกว้างต่ำสุด: 500px) {.ilfs_responsive_below_title_1 { width: 300px; } } @media (ความกว้างต่ำสุด: 800px) {.ilfs_responsive_below_title_1 { width: 336px; } }
ชาร์ต คือ ไลบรารีการสร้างแผนภูมิ SVG โอเพ่นซอร์สฟรีที่ใครๆ ก็ใช้ได้ มันล้ำหน้ามากและรองรับการสร้างแผนภูมิจำนวนมากพร้อมพารามิเตอร์มากมาย ด้วยวิธีนี้ คุณสามารถสร้างแผนภูมิที่มีสีสันทุกขนาดและวางไว้บนเว็บไซต์ของคุณได้ มันยังรองรับแอนิเมชั่นโดยใช้ CSS และด้วยความช่วยเหลือของไลบรารีนี้ คุณจะสามารถสร้างแผนภูมิและกราฟเคลื่อนไหวได้
ในการสร้างแดชบอร์ดและหน้าเว็บเพื่อแสดงข้อมูลที่เกี่ยวข้องกับรายงานบางประเภท คุณต้องมีแผนภูมิ. หลายครั้ง พวกเขาจำเป็นต้องเป็นไดนามิกหรือคงที่ มีเครื่องมือสำหรับสิ่งนั้นแต่ไม่เหมือน Chartist นี่อาจเป็นหนึ่งในประเภทนี้ มันมาพร้อมกับเอกสารที่มีรายละเอียดมากและตัวอย่างที่ดีมาก ดังนั้นคุณจึงสามารถเรียนรู้การสร้างแผนภูมิได้อย่างรวดเร็ว
รายการประเภทแผนภูมิที่รองรับโดย Chartist:
แผนภูมิแท่ง (แบบเรียงซ้อนและแนวนอนรวมถึง) แผนภูมิเส้น แผนภูมิวงกลม แผนภูมิพื้นที่ แผนภูมิโดนัท แผนภูมิเกจ แผนภูมิการกระจายเส้น ไดอะแกรม เส้นทาง SVG แบบเคลื่อนไหว แผนภูมิเส้นสองขั้ว อนุกรมเวลา
คุณสมบัติของแผนภูมิที่สร้างโดยนักชาร์ต:
การกำหนดค่าที่ตอบสนองได้มาก การวางป้ายกำกับ ป้ายกำกับหลายบรรทัด แถบซ้อนทับกันสำหรับมือถือ รูในข้อมูล ภาพเคลื่อนไหว CSS ภาพเคลื่อนไหว SVG ภาพเคลื่อนไหวขั้นสูง SMIL รองรับปลั๊กอิน
วิธีใช้ Chartsit เพื่อสร้างแผนภูมิ SVG
มีหลายวิธีในการใช้ไลบรารีนี้ คุณสามารถใช้มันได้ทั้งนี้ขึ้นอยู่กับชนิดของนักพัฒนาส่วนหน้าของคุณ มันมาในรูปแบบโมดูลโหนดและไฟล์สคริปต์ที่ฝังได้ซึ่งคุณสามารถให้บริการโดยตรงบน HTML ผ่าน CDN
เพื่อความง่าย คุณสามารถใช้สิ่งนี้ในเอกสาร HTML ได้อย่างง่ายดาย คุณเพียงแค่ต้องนำเข้าไฟล์เหล่านี้ในส่วน
ของเว็บไซต์ของคุณ https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.jsหลังจากเชื่อมโยงไลบรารีแล้ว คุณจะต้องเขียนองค์ประกอบ
ตอนนี้ เพิ่มแท็กสคริปต์ซึ่งจะสร้างแผนภูมิในคอนเทนเนอร์ที่ระบุจริงๆ นี้เป็นจริงง่ายมาก หากคุณรู้จัก JavaScript เป็นอย่างดี คุณสามารถอ่านเอกสารประกอบเพื่อดูวิธีสร้างแบบกำหนดเองได้ แผนภูมิ. เพื่อการสาธิต คุณสามารถใช้รหัสต่อไปนี้ เพิ่มเข้าไปใต้
เกือบเสร็จแล้ว เพียงเปิดไฟล์ HTML ในเบราว์เซอร์ แผนภูมิจะถูกสร้างขึ้นในขณะนี้สำหรับคุณ คุณสามารถเล่นกับโค้ด JS เพื่อสร้างแผนภูมิที่กำหนดเองตามข้อมูลต่างๆ นอกจากนี้ คุณสามารถสร้างแผนภูมิประเภทอื่นได้ด้วยวิธีนี้
เอกสารบนเว็บไซต์หลักของ Chartist มีรายละเอียดที่ดีมาก มีตัวอย่างมากมายเกี่ยวกับวิธีสร้างแผนภูมิแบบเคลื่อนไหว ในฐานะนักพัฒนาส่วนหน้า คุณจะต้องอ่านเอกสารประกอบเพื่อสร้างแผนภูมิ และด้วยโค้ดบางโค้ด คุณสามารถทำให้ส่งออกได้เช่นกัน
แนวคิดปิด:
ต้องบอกว่า Chartist เป็นเครื่องมือล้ำค่าสำหรับนักพัฒนาและนักออกแบบในการผสานรวมแผนภูมิที่กำหนดเองเข้ากับ การแสดงละครรวมทั้งเว็บไซต์ในการผลิต มันง่ายมากและคุณไม่จำเป็นต้องเขียนโค้ดยาวๆ เว้นแต่ว่าคุณไม่ได้สร้างโค้ดที่ซับซ้อนจริงๆ ที่เก็บ GitHub มีดาวมากกว่า 10,000 ดวงแล้ว ซึ่งเป็นความสำเร็จที่ยิ่งใหญ่ในตัวเอง