A-AA+then

เรื่องของเรื่องคือผมต้องการแสดงกราฟแท่งที่รองรับภาษาไทย แต่หลังจากที่ทดสอบการวาด กราฟด้วย GD แล้ว พบว่าบาง Server มีปัญหากับภาษาไทยอยู่เล็กน้อย ก็เลยเปลี่ยนใจหันกลับมาวาดกราฟด้วย XHTML+CSS แทน ซึ่งจะว่าไปแล้ว กลับพบว่าได้ผลดีกว่าการวาดด้วย GD เสียอีก อีตรงที่มีความเร็วสูงกว่า และ ความสวยงามก็ไม่แพ้กันเลย แต่ข้อจำกัดที่สำคัญ ก็คือวาดได้แค่กราฟแท่งนี่แหละ

โค้ดนี้สามารถแสดงเส้นกริดได้ด้วยนะครับ
<?php
   // ข้อมูล
    $datas[] = array('มกราคม', 20);
    $datas[] = array('กุมภาพันธ์', 40);
    $datas[] = array('มีนาคม', 60);
    $datas[] = array('เมษายน', 80);
    $datas[] = array('พฤษภาคม', 100);
    $datas[] = array('มิถุนายน', 50);

   // ค่าสูงสุด
    $max_value = 100;
   // ความสูงของกราฟแท่ง (แต่ละแท่ง)
    $bar_height = 16;
   // ความกว้างรวมของกราฟ
    $graph_width = 300;
   // ระยะห่างของแต่ละกราฟและ padding ของกรอบ
    $padding_width = 10;
   // ความกว้างของ label ด้านซ้าย
    $label_width = 55;
   // จำนวนคอลัมน์ของ grid
    $grid_cols = 5;

   // จำนวนแถวของ grid
    $grid_rows = floor(count($datas) / 2);
   // ความสูงของกราฟ
    $graph_height = (($bar_height + $padding_width) * count($datas)) + (3 * $padding_width);
   // ความกว้างของกราฟ
    $gw = $graph_width - $label_width - (2 * $padding_width);
    $_v = $max_value / $grid_cols;
?>

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="th" lang="th" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>กราฟแท่งแนวนอนด้วย CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
 <?php
   // css
    $graphs[] = '<style type="text/css">';
    $graphs[] = 'div#demo{border:2px solid #666;background-color:#EFEFEF;width:'.$graph_width.'px;height:'.$graph_height.'px;position:relative;}';
    $graphs[] = 'div#demo *{margin:0;padding:0;font-family:Helvetica,Geneva,sans-serif;font-size:9px;}';
    $graphs[] = 'div#demo > dl.graph-grid{margin-left:'.($label_width + $padding_width).'px;}';
    $graphs[] = 'div#demo > dl.graph-grid > dd{border-bottom:1px solid #C4C4C4;float:left;height:'.($graph_height / $grid_rows).'px;width:'.$gw.'px;}';
    $graphs[] = 'div#demo > dl.graph-grid > dt{position:absolute;height:'.$graph_height.'px;top:0;border-left:1px solid #C4C4C4;}';
    $graphs[] = 'div#demo > dl.graph-grid > dt > span{border-right:1px dotted #C4C4C4;float:left;width:'.(($gw - $grid_cols) / $grid_cols).'px;height:'.($graph_height - $padding_width).'px;position:relative;}';
    $graphs[] = 'div#demo > dl.graph-grid > dt > span > span{position:absolute;bottom:0;left:0;margin-bottom:-1.2em;margin-left:'.($gw / $grid_cols / 2).'px;width:'.($gw / $grid_cols).'px;text-align:center;}';
    $graphs[] = 'div#demo > dl.graph-data{position:absolute;top:0;margin:'.$padding_width.'px;}';
    $graphs[] = 'div#demo > dl.graph-data > dd{display:table;margin-bottom:10px;clear:both;}';
    $graphs[] = 'div#demo span.label-row{float:left;width:'.$label_width.'px;line-height:'.$bar_height.'px;}';
    $graphs[] = 'div#demo span.bar-graph{border-color:#E96AE8 #9A2B99 #000000 #E96AE8;border-width:1px;border-style:solid;float:left;}';
    $graphs[] = 'div#demo span.value-graph{float:right;margin-right:5px;height:'.$bar_height.'px;line-height:'.$bar_height.'px;}';
    $graphs[] = '</style>
';
   // วาดกราฟ
    $graphs[] = '<div id="demo">';
    $graphs[] = '<dl class="graph-grid">';
    for ($i = 1; $i < $grid_rows; $i++) {
        $graphs[] = '<dd></dd>';
    }
    $graphs[] = '<dt>';
    for ($i = 0; $i < $grid_cols; $i++) {
        $graphs[] = '<span><span>'.((1 + $i) * $_v).'</span></span>';
    }
    $graphs[] = '</dt>';
    $graphs[] = '</dl>';
    $graphs[] = '<dl class="graph-data">';
    foreach ($datas AS $items) {
        $w = (($gw - 2) * $items[1]) / $max_value;
        $graphs[] = '<dd><span class="label-row">'.$items[0].'</span><span><span class="bar-graph" style="width:'.$w.'px;background-color:#D438D2;"><span class="value-graph">'.$items[1].'</span></span></span></dd>';
    }
    $graphs[] = '</dl>';
    $graphs[] = '</div>';
    echo implode("\n", $graphs);
?>

</body>
</html>
 
 
20 40 60 80 100
มกราคม20
กุมภาพันธ์40
มีนาคม60
เมษายน80
พฤษภาคม100
มิถุนายน50

Relate

^