การแสดงข้อมูลด้วยกราฟ CSS แผนภูมิและอื่น ๆ

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

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

คุณต้องการมากขึ้น? เลื่อนต่อไป!

Barchart แนวนอน

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

CSSplay

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

ร้อยละ Bargraph

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

Maxdesign

Russ Weakley สอนให้คุณสร้างกราฟตามเปอร์เซ็นต์และการใช้ภาพพื้นหลัง รหัสและรูปภาพที่เชื่อมโยงสามารถคัดลอกและดาวน์โหลดเพื่อใช้ในโครงการของคุณ.

Barchart แนวตั้ง

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

CSS ของแท้กราฟิค

กราฟเส้นส่งข้อมูลเร็วกว่าตารางที่มีตัวเลข เรียนรู้วิธีสร้างกราฟเส้นด้วย CSS โดยใช้ HTML แทนที่ข้อความด้วยรูปภาพและใช้ CSS sprites และการจัดตำแหน่งที่แน่นอนเพื่อรับกราฟเส้น.

กราฟิคแบบง่าย

กราฟเส้นที่เรียบง่ายมากซึ่งใช้เฉพาะ DHTML และ CSS และที่ที่คุณสามารถตั้งค่าพื้นหลังโปร่งใสสำหรับกราฟ กราฟนี้โหลดเร็วขึ้นและผสมกับส่วนที่เหลือของหน้า.

Mgraph

Ajax กราฟนี้ใช้เพื่อแสดงข้อมูลของปีตามแต่ละเดือนโดยใช้ CSS และ XHTML เท่านั้นและทำงานใน Firefox และ Opera

รายการหลายคอลัมน์

Paul Novitski สอนให้คุณสร้างรายการหลายคอลัมน์โดยใช้ CSS ในบทความนี้ เขากล่าวถึงเทคนิคจำนวนมากเพื่อให้ได้รายการคอลัมน์ที่หลากหลายเช่นการลอยรายการแยก, กำหนดหมายเลขด้วยแอตทริบิวต์ HTML, สร้างเนื้อหา CSS, ตัดรายการด้วย XHTML, CSS ฯลฯ และในที่สุดก็เพิ่มสไตล์และภาพพื้นหลังเล็กน้อยเพื่อให้ได้คอลัมน์ รายการที่สมบูรณ์แบบ.

Bulletgraph

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

การต่อรองคอลัมน์

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

กราฟหยุดทำงาน

กราฟหยุดทำงานในขั้นต้นมีปัญหาในการแสดงระยะเวลานานบนพื้นที่หน้าจอที่ จำกัด และการจัดวางรูปแบบเหตุการณ์ที่โปร่งใสซึ่งได้รับการชี้แจงโดยกระบวนทัศน์ปฏิทินรายเดือน onMouseOver () ยังคงทำงานอยู่และมีการใช้สีที่แตกต่างกันสำหรับเหตุการณ์การหยุดทำงานประเภทต่างๆ.

กราฟ CSS แบบไดนามิกสด

กราฟ CSS แบบไดนามิกสดเพื่อแสดงเวลาตอบสนองของการ ping ที่ดำเนินการโดยเว็บเซิร์ฟเวอร์อ่านข้อมูลจากเว็บเซิร์ฟเวอร์ด้วยโค้ด CSS และ JavaScript, ฟังก์ชั่น AJAX และการเลื่อนกราฟ.

แนวระนาบแนวนอน

กราฟแท่งไม่จำเป็นต้องมีรูปร่างเสมอไป สามารถสร้างกราฟแท่งแนวนอนได้ ในบทความนี้มีการสร้างกราฟแท่งแนวนอนที่มีการเปลี่ยนแปลงสีต่างกันโดยใช้คลาส 'กราฟแนวนอน' และระบุความสูงของกราฟจากมาร์กอัปโดยใช้ CSS.

Multigraph

กราฟเส้นที่ไม่ได้ใช้สารบัญจะสร้างด้วย CSS และ DHTML ซึ่งโหลดเร็วขึ้นและสามารถเปลี่ยนพื้นหลังได้แบบโปร่งใส.

กราฟแผนการผลิต

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

แซนวิชกราฟ

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

เรียงซ้อนกัน

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

กราฟิคที่เรียบง่าย

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