XHTML / CSSを使用したグラフィックチャートのモデリング

ページにデータを棒グラフの形式で表示する必要がある場合、結果をグラフィカルに生成する方が便利な場合がよくあります。 リストの例は、CSSとXHTMLのみを使用してデータの棒グラフを作成する関数を示しています。

値の配列を受け取り、それらを値ごとに1ピクセルの太さの線の形で画像に適用するスクリプトを作成します。 同時に、目的の効果を得るために、絶対配置にdiv式を使用し、CSSを使用して高さを設定します。 個々の値の相対的な変化を決定する最大の高さの値を設定することにより、設計の実装に必要な結果のページに結果の図を配置できます。

<?php // ,  . //   ,       . //, , ,  4 ,   , ,   ,   //  . function create_chart($data, $height, $bars='red', $bg='white', $border='black', $grid='#ddd') { //   ,           //    ,   ,     //   : static $idx = 0; $idx++; //      2 ,      : $height -= 2; //     ,     //,      . $scale = $height / (max($data) * 1.05); //  $width = count($data); //      CSS,      //: echo" <style> #chartout{$idx}{ position: relative; height: ",$height + 2,"px; width: ",$width + 2,"px; background-color: {$border}; } #chartin{$idx}{ position: absolute; top: 1px; left: 1px; height: {$height}px; width: {$width}px; background-color: {$bg}; } .bar{$idx}{ position: absolute; bottom: 0; background-color: {$bars}; width: 1px; overflow: hidden; } .grid{$idx}{ position: absolute; left: 0; height: 1px; width: {$width}px; background-color: {$grid}; padding: 0; margin: 0; overflow: hidden; } </style> "; //    : echo"<div id='chartout{$idx}'><div id='chartin{$idx}'>"; //  ,         : foreach(range(1,3) as $line) { $lh = round($line * ($height/5)); echo "<div class='grid{$idx}' style='top: {$lh}px'></div>\n"; } //  ,         // : foreach($data as $pos => $val) { $barheight = round($val * $scale); echo "<div class='bar{$idx}' style='left: {$pos}px; height: {$barheight}px;'></div>\n"; } // echo "\n</div></div>\n"; } //   200      . $chardata = array(); $chardata2 = array(); for ($i=0; $i<200; $i++) { $chardata[$i] = rand(1,1000); $chardata2[$i] = rand(1,1000); } //   ,  100 : create_char($chardata,100); //     50 ,   : create_char($chardata2,50,"#0c0","black","black","#666"); ?> 

第1チャート：


2番目のチャート：


両方：