สร้างกราฟแท่งแนวนอนด้วย XHTML CSS

เรื่องของเรื่องคือผมต้องการแสดงกราฟแท่งที่รองรับภาษาไทย แต่หลังจากที่ทดสอบการวาด กราฟด้วย 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