XHTML / CSS का उपयोग करके ग्राफिक चार्टिंग मॉडलिंग

जब आपको बार चार्ट के रूप में अपने पृष्ठ पर डेटा प्रस्तुत करने की आवश्यकता होती है, तो यह अक्सर परिणाम को ग्राफिक रूप से उत्पन्न करने के लिए अधिक सुविधाजनक होता है। लिस्टिंग उदाहरण एक फ़ंक्शन को दिखाता है जो केवल सीएसएस और एक्सएचटीएमएल का उपयोग करके डेटा का एक बार चार्ट बनाता है।

हम एक स्क्रिप्ट लिखना चाहते हैं जो मूल्यों की एक सरणी प्राप्त करेगा और उन्हें प्रत्येक मूल्य के लिए 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 चार्ट:


दूसरा चार्ट:


दोनों: