CSS Techniques for Charting Data

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

ขั้นตอนแรก ทำภาพตารางด้านหลังกันก่อนเลย



ต่อมาก็ภาพแท่งกราฟ ที่เราต้องการไล่สี



เราไม่ต้องแยกภาพทีละชิ้น...สามารถรวบภาพแบบนี้ได้เลย เพราะเวลาโหลดจะได้โหลดไฟล์มาทีเดียว

ดู code กันเลยดีกว่า

CSS

#vertgraph {
     width: 378px;
     height: 207px;
     position: relative;
     background: url("g_backbar.gif") no-repeat; /*--ไฟล์ภาพ BG หลังสุด--*/
}
#vertgraph ul {
     width: 378px;
     height: 207px;
     margin: 0;
     padding: 0;
}
#vertgraph ul li {
     position: absolute;
     width: 28px;
     height: 160px;
     bottom: 34px;
     padding: 0 !important;
     margin: 0 !important;
     background: url("g_colorbar3.jpg") no-repeat !important;/*--ภาพแท่งกราฟ--*/
     text-align: center;
     font-weight: bold;
     color: white;
     line-height: 2.5em;
}
#vertgraph li.critical{
     left:24px;
     background-position:0px bottom !important;
     height:150px;
}
#vertgraph li.high{
     left:101px;
     background-position:-28px bottom !important;
     height:80px;
}
#vertgraph li.medium{
     left:176px;
     background-position:-56px bottom !important;
     height:50px;
}
#vertgraph li.low{
     left:251px;
     background-position:-84px bottom !important;
     height:90px;
}
#vertgraph li.info{
     left:327px;
     background-position:-112px bottom !important;
     height:40px;
}

ไฟล์ HTML

<div id="vertgraph">
  <ul>
     <li class="critical">22</li>
     <li class="high">7</li>
     <li class="medium">3</li>
     <li class="low">8</li>
     <li class="info">2</li>
  </ul>
</div>

ผลลัพธ์จะออกมา ดังรูปข้างล่างนี้