साधारण क्षैतिज बार ग्राफ़ का उपयोग php


0 Answers

आप इसे केवल सीएसएस के साथ एक अवधि की पृष्ठभूमि की पृष्ठभूमि की पृष्ठभूमि-स्थिति सेट करके कर सकते हैं।

मान लें कि बार की अधिकतम चौड़ाई 200 पिक्सल है इस बार के लिए HTML और CSS कुछ ऐसा दिखाई दे सकता है:

<label>49%</label><span class="bar">Sweaters with leggings</span>

और सीएसएस:

span.bar {
    background: url(bar_bg.png) 0 0 repeat-y;
    display: block;
    width: 200px;
    line-height: 20px;
}

पृष्ठभूमि की छवि पर ध्यान दें? इसके लिए, आपको 400 पिक्स x 1 पिक्सेल आकार की छवि की आवश्यकता है, जहां बाईं पिक्सेल 200 पिक्सल को रंग से रंग दिया जाता है, जिसे आप सलाखों के लिए चाहते हैं, बाकी सफेद या पारदर्शी है। यदि आप इस पृष्ठभूमि को 0 0 की पृष्ठभूमि की पृष्ठभूमि के साथ सेट करते हैं, तो बार 100% रंगीन होगा, और अगर आप -200px 0 की पृष्ठभूमि की स्थिति -200px 0 , तो बार रिक्त होगा। इसलिए, आपको अपने प्रत्येक मूल्यों के लिए इन चरम सीमाओं में अपनी पृष्ठभूमि स्थिति को निर्धारित करने का निर्धारण करना होगा।

सबसे पहले आपको अधिकतम मूल्यों को ढूंढना होगा जिन्हें आप प्रतिनिधित्व करना चाहते हैं। अधिकतम मान की पृष्ठभूमि स्थिति 0 0 , जबकि 0 का मान -200px 0 की पृष्ठभूमि स्थिति है।

पृष्ठभूमि की गणना और लागू करने के लिए PHP कोड इस तरह से चला जाता है:

$values = array(
            49 => 'Sweaters with leggings',
            37 => 'Scarves with everything',
            14 => 'Cute knit hats and gloves');

// Find the maximum percentage
$max = max(array_keys($values));

foreach($values as $percentage => $label) {
    // Calculate the position, maximum value gets position 0, smaller values approach 200
    $pos = 200 - ($percentage / $max) * 200;
    // Output the label that shows the percentage
    echo '<label>'.$percentage.'%</label>';
    // Output the span, apply style rule for the background position
    echo '<span class="bar" style="background-position: -'.$pos.'px 0;">'.$label.'</span>';
}

यदि आप अपने उदाहरण के रूप में उच्चतम मूल्य के लिए अलग रंगीन बार का उपयोग करना चाहते हैं, तो आप केवल एक और पृष्ठभूमि छवि कर सकते हैं और उच्चतम मूल्य के साथ एक कक्षा को लागू कर सकते हैं:

echo '<span class="bar '.($value == $max ? 'bar_max' : '').'" style="background-position: -'.$pos.'px 0;">'.$value.'</span>';

और सीएसएस में:

span.bar.bar_max {
    background: url(bar_max_bg.png) 0 0 repeat-y;
}

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

Question

मैंने एक फेसबुक एप्लिकेशन देखा है जिसमें एक रेडीओ बटन पर क्लिक करने से ग्राफ़ निकलता है

जैसा कि आप नीचे देख सकते हैं:

वैकल्पिक पाठ http://img684.imageshack.us/img684/539/poll1.png

वैकल्पिक पाठ http://img694.imageshack.us/img694/3415/poll2.png

मैं जानना चाहता था कि क्या ऐसा कोई समान ग्राफ लाइब्रेरी है जिसके माध्यम से मैं उसी ग्राफ को पीएचपी में उत्पन्न कर सकता हूं।

धन्यवाद,

पंकज






Related



Tags

php php   graph