10 CSS Snippets สำหรับสร้างกราฟแท่งอย่างง่าย

กำลังมองหาวิธีสร้างกราฟแท่ง CSS อย่างง่ายบนเว็บอยู่ใช่ไหม คอลเล็กชันนี้ช่วยคุณได้อย่างแน่นอน เนื่องจากเต็มไปด้วยแผนภูมิแท่งแบบโอเพนซอร์สที่ให้บริการฟรี ซึ่งทั้งหมดได้รับการออกแบบใน CSS

กราฟเหล่านี้ส่วนใหญ่อัดแน่นไปด้วยอนิเมชั่น CSS และเอฟเฟกต์การไล่ระดับสีเพิ่มเติม แต่คุณจะพบบางส่วนที่ปรับรูปแบบการวางตำแหน่ง ขนาด รูปร่าง และการออกแบบของข้อมูลด้วย คอลเลกชันที่สมบูรณ์แบบสำหรับนักพัฒนาฟรอนท์เอนด์ที่กำลังมองหา UI กราฟแท่งที่ทันสมัย

1. แผนภูมิข้อมูล

ในชุดนี้ คุณจะได้พบกับแผนภูมิบางส่วนที่ออกแบบมาอย่างสวยงามและใช้งานได้ดีมาก นักพัฒนา Kris Olszewski ส่วนใหญ่เน้นที่ UX สำหรับกราฟแท่งเหล่านี้ พร้อมกับด้านบนของแต่ละแถบที่แชร์ข้อมูลดิบ (หมายเลขตัวยึดตำแหน่งในกรณีนี้)

โดยธรรมชาติแล้ว ทุกสิ่งทำงานบน CSS ซึ่งน่าประทับใจอย่างแน่นอน มีเทมเพลตสำหรับแถบแนวตั้งและแนวนอนและแถบแบบฉัตร ซึ่งคุณสามารถเปลี่ยนสีพื้นหลังตามค่าบางอย่างได้

หนึ่งในชุดโปรดของฉันอย่างง่ายดายเพราะมันมีความหลากหลายมากมายสำหรับนักพัฒนาในการเลือกและปรับแต่ง

2. กราฟแท่งโปเกมอน

ไม่สามารถพูดได้ว่าการออกแบบนี้จะมีประโยชน์อย่างยิ่งในเลย์เอาต์ของโลกแห่งความเป็นจริง แต่น่าประทับใจอย่างแน่นอน

แถบสไตล์โปเกมอนเหล่านี้มีการออกแบบกราฟที่สร้างสรรค์สำหรับเว็บ แต่ละแถบใช้โทนสีที่แน่นอนพร้อมกับองค์ประกอบเวกเตอร์สำหรับดวงตาของโปเกมอนแต่ละตัว

แต่ละอันมีเอฟเฟกต์แอนิเมชั่นโฮเวอร์ ดังนั้นคุณจึงสามารถจัดรูปแบบใหม่เพื่อให้เข้ากับทรานซิชั่นที่คุณต้องการ และถ้าคุณต้องการเปลี่ยนสิ่งมีชีวิตเหล่านี้เป็นสัตว์อื่น คุณสามารถทำตามเทมเพลตเดียวกันนี้ด้วยการเปลี่ยนสี

3. กราฟเคลื่อนไหว

กราฟแท่งใช้เพื่อแสดงข้อมูลภาพเพื่อการบริโภคที่ง่าย ซึ่งหมายความว่าควรรวมทั้งรายการภาพ และ ข้อมูลดิบ

นั่นเป็นสิ่งหนึ่งที่ฉันชอบเกี่ยวกับกราฟนี้มากโดยใช้ป้ายเปอร์เซ็นต์ที่ด้านบนของแต่ละแท่ง ไม่มีคำอธิบายหรือป้ายกำกับ X/Y ใดๆ แต่เพิ่มได้ไม่ยาก

ฉันคิดว่าส่วนที่น่าประทับใจที่สุดคือการทำงานทั้งหมดผ่าน CSS ภาพเคลื่อนไหวและข้อความเปอร์เซ็นต์ปรากฏขึ้นเนื่องจากคุณสมบัติของ CSS ของบ้า!

4. แผนภูมิมินิมอล

เรียบง่ายและใช้งานง่าย อธิบายความคลั่งไคล้แบบมินิมอลลิสต์ได้ดีที่สุดในเว็บ ความเรียบง่ายมักเป็นตัวเลือกที่ดีที่สุดสำหรับเว็บไซต์ที่ตอบสนองตามอุปกรณ์หรือเลย์เอาต์ที่เรียบง่ายซึ่งไม่ต้องการชุดสีที่หนักหน่วง

และด้วยแผนภูมิแท่งนี้ คุณสามารถจัดรูปแบบข้อมูลใหม่เพื่อให้พอดีกับสีอ่อนใดๆ ที่คุณต้องการ

ใช้แถวพื้นหลังที่กำหนดเองเพื่อระบุการวัด และคุณยังสามารถเพิ่มป้ายกำกับบนแกน Y เพื่อทำให้ข้อมูลชัดเจนขึ้น

5. แถบสี CSS บริสุทธิ์

การไล่ระดับสี CSS เพิ่มจำนวนมากให้กับเว็บ และกราฟแท่งนี้เป็นเพียงตัวอย่างหนึ่งของการไล่ระดับสีในการดำเนินการ

แต่ละแถบใช้การไล่ระดับเว็บ 2.0 แบบคลาสสิกซึ่งให้ความรู้สึกเหมือนโรงเรียนเก่าเล็กน้อย แต่ก็ดูยอดเยี่ยม การออกแบบทั้งหมดทำงานบนโค้ด Sass และใช้ตัวแปรเพื่อตั้งค่าการหน่วงเวลาของภาพเคลื่อนไหว ขนาดแท่ง และความสูงของกราฟทั้งหมด

ในการแก้ไขสี คุณจะต้องทำงานผ่าน Sass/SCSS หรือใช้ CodePen เพื่อคอมไพล์เป็น CSS ดิบ แต่มันไม่ใช่กราฟที่ซับซ้อนเกินไป ดังนั้นนี่ไม่น่าจะเป็นปัญหามากนัก

6. แถบแนวนอนที่เซ

แอนิเมชั่นเชิงเส้นเป็นสิ่งที่ฉันโปรดปรานเพราะมันดึงดูดความสนใจได้อย่างรวดเร็ว ในปากกานี้ คุณจะเห็นตัวอย่างของแอนิเมชั่นเชิงเส้นที่มีการโหลดแต่ละแถบเข้ามาดูทีละอัน

มันถูกออกแบบในแนวนอน ดังนั้นแถบจะโหลดผ่านหน้าจอและรวมป้ายกำกับไว้ในกราฟิกแท่ง ด้วยวิธีนี้ การวัด "ระดับทักษะ" ทั้งหมดจะเป็นไปตามแกน X และทำให้เหลือพื้นที่เพื่อเพิ่มทักษะในแนวตั้งมากขึ้น

หนึ่งในกราฟแท่งที่สะอาดตาที่ฉันเคยเห็น และมันสามารถทำงานได้อย่างยอดเยี่ยมบนเว็บไซต์พอร์ตโฟลิโอตามทักษะใดๆ

7. กราฟแท่งตอบสนอง

เว็บไซต์สมัยใหม่ทุกแห่งควรตอบสนองเพื่อรองรับทุกอุปกรณ์ แต่องค์ประกอบบางอย่างนั้นยากต่อการตอบสนองมากกว่าองค์ประกอบอื่นๆ

แท็บ ตารางขนาดใหญ่ และกราฟล้วนเป็นตัวอย่างที่ซับซ้อน กราฟตอบสนองนี้จัดการหน้าจอขนาดเล็กได้อย่างดีเยี่ยม ไม่ได้จัดเรียงใหม่เกินกว่าขนาดรวมและช่องว่างระหว่างแถบ

บนหน้าจอขนาดเล็ก รายการบาร์อาจรู้สึกคับแคบและแทบจะอ่านไม่ออก แต่โดยส่วนใหญ่แล้ว สไตล์การตอบสนองนี้ยอดเยี่ยมมาก และสามารถใช้แทนกราฟคงที่ได้อย่างสมบูรณ์แบบ

8. กราฟ CSS รายวัน

นักพัฒนาต้องการทดสอบทักษะด้วยความท้าทาย เช่น Daily CSS ซึ่งจะดึงภาพการออกแบบ UI ในแต่ละวันและขอให้นักพัฒนาสร้างใหม่ใน HTML/CSS

คุณจะพบสิ่งเหล่านี้มากมายใน CodePen และกราฟนี้เป็นตัวอย่างที่ดีอย่างหนึ่ง

มันถูกออกแบบด้วยความเรียบง่ายและเอฟเฟกต์แอนิเมชั่นที่สะอาดตาแนบมากับแต่ละแถบ ไม่ต้องพูดถึงว่ามันเป็นไปตามโทนสีขาวดำที่สามารถปรับให้เข้ากับเว็บไซต์ได้อย่างง่ายดาย

9. แผนภูมิ Vinventory

ตัวอย่าง CSS รายวันที่ยอดเยี่ยมอีกตัวอย่างหนึ่งคือแผนภูมิสินค้าคงคลังของไร่องุ่นที่สร้างขึ้นโดยใช้ CSS และทักษะ HTML ที่ชาญฉลาด

เป็นแนวคิดที่ค่อนข้างแปลกใหม่และน่าประทับใจยิ่งกว่าที่มันทำงานผ่าน CSS เพียงอย่างเดียว ฉันประทับใจที่สุดกับการออกแบบกราฟจริง ๆ และวิธีที่กราฟแสดงผลได้อย่างสมบูรณ์แบบในเบราว์เซอร์

จริงอยู่ที่วิธีนี้ใช้ไม่ได้กับเว็บไซต์ส่วนใหญ่เช่นกัน แต่เป็นข้อพิสูจน์ถึงสิ่งที่เป็นไปได้ใน CSS สมัยใหม่

10. CSS-Only Horizontal Skills เท่านั้น

คุณจะพบกราฟแท่งวัดทักษะมากมายทางออนไลน์ แต่อันนี้ของ Jed Trow นั้นใช้ได้จริง

ได้รับการออกแบบมาให้ตอบสนองได้อย่างเต็มที่ และทำงานได้อย่างไม่มีที่ติบนทุกหน้าจอ คุณสามารถปรับขนาดกราฟแท่งนี้ให้เหลือ 320px สำหรับสมาร์ทโฟน และยังคงความสม่ำเสมอ

นอกจากนี้ ปากกานี้ยังมีส่วนบทช่วยสอนเล็กๆ ด้านล่างการสาธิต ซึ่งคุณสามารถดูซอร์สโค้ดทั้งหมดและวิธีการทำงาน แน่นอน คุณยังสามารถคัดลอก/วางจาก IDE ของ CodePen ได้ แต่ก็ดีที่ได้เห็นนักพัฒนาซอฟต์แวร์หยุดกระบวนการของพวกเขา

กราฟทั้งหมดเหล่านี้นำเสนอบางสิ่งที่ไม่เหมือนใคร แต่ก็มีสิ่งหนึ่งที่เหมือนกัน นั่นคือ การใช้โค้ด CSS ล้วนๆ ที่น่าทึ่ง

คุณอาจชอบ: 10 โอเพ่นซอร์ส JavaScript Data Chart Libraries ที่ควรพิจารณา