رسم نمودارهای گرافیکی بوسیله CSS

 

رسم نمودار توسط CSS و XHTML

 

همیشه داشتن دانش کافی در مورد CSS و XHTML در هنگام طراحی و توسعه برنامه های تحت وب به شما کمک شایانی میکند تا بدانید چه چیزهایی میتواند در سمت کلاینت و چه چیزهایی میتواند در سمت سرور تولید شود . در این مطلب قصد داریم با بهره گیری از CSS و XHTML و با استفاده از یک روش بسیار ساده و انعطاف پذیر ، نمودارهای گرافیکی زیبا که میتواند در وب سایت ها و نرم افزارهای مهندسی و یا هر کجا که نیاز به نمایش مقادیر به صورت گرافیکی باشد را رسم کنیم .در صورت تمایل در این نمودارها میتوانید رنگ ، طول ، عرض ، مقدار و تعداد را بسته به نیاز خود تنظیم کنید .در پایان این مقاله میتوانید کدمنبع کامل این برنامه را دانلود نمایید. همچنین میتوانید هم اکنون دموی این نمودارها را در اینجا مشاهده نمایید . لازم به ذکر است این نمودارها در مرورگرهای Chrome ، Firefox ، IE ،Safari و Opera تست شده اند.

نمودار ساده : اولین نمودار ، یک نوار گرافیکی افقی ساده است که توانایی نمایش دقیق مقادیر به صورت درصد را دارد .

نمودار ساده گرافیکی توسط css
کد CSS :

.graph { 
        position: relative; /* IE is dumb */
        width: 200px; 
        border: 1px solid #B1D632; 
        padding: 2px; 
    }
    .graph .bar { 
        display: block;
        position: relative;
        background: #B1D632; 
        text-align: center; 
        color: #333; 
        height: 2em; 
        line-height: 2em;            
    }
    .graph .bar span { position: absolute; left: 1em; }

کد XHTML :

<div class="graph">
    <strong class="bar" style="width: 24%;">24%</strong>
</div>


نمودار گرافیکی افقی : این نمودار دارای امکانات بیشتری نسبت به نمودار قبلی است . در این نمودار میتوان با تغییرات رنگی دلخواه از حالت "خوب" به "بد" و یا بالعکس تغییرات را نشان داد که بسته موضوع و موقعیت میتوان از نوارهای رنگی مناسب استفاده کرد . 

کد CSS :

dl { 
        margin: 0; 
        padding: 0;                     
    }
    dt { 
        position: relative; /* IE is dumb */
        clear: both;
        display: block; 
        float: left; 
        width: 104px; 
        height: 20px; 
        line-height: 20px;
        margin-right: 17px;              
        font-size: .75em; 
        text-align: right; 
    }
    dd { 
        position: relative; /* IE is dumb */
        display: block;                 
        float: left;     
        width: 197px; 
        height: 20px; 
        margin: 0 0 15px; 
        background: url("g_colorbar.jpg"); 
     }
     * html dd { float: none; } 
    /* IE is dumb; Quick IE hack, apply favorite filter methods for 
    wider browser compatibility */

     dd div { 
        position: relative; 
        background: url("g_colorbar2.jpg"); 
        height: 20px; 
        width: 75%; 
        text-align:right; 
     }
     dd div strong { 
        position: absolute; 
        right: -5px; 
        top: -2px; 
        display: block; 
        background: url("g_marker.gif"); 
        height: 24px; 
        width: 9px; 
        text-align: left;
        text-indent: -9999px; 
        overflow: hidden;
     }

کد XHTML :

 

<dl>
    <dt>Love Life</dt>
    <dd>
        <div style="width:25%;"><strong>25%</strong></div>
    </dd>
    <dt>Education</dt>
    <dd>
        <div style="width:55%;"><strong>55%</strong></div>
    </dd>
    <dt>War Craft 3 Rank</dt>
    <dd>
        <div style="width:75%;"><strong>75%</strong></div>
    </dd>
</dl>


نمودار گرافیکی عمودی :  همانطور که مشاهده می کنید ، این نمودار برای نمایش مقادیر به صورت عمودی به کار گرفته می شود . با تغییر مقادیر به کار گرفته شده در کدهای طراحی این نمودار میتوانید رنگ و مقدار دلخواه خود را به نمودار اعمال کنید . در این نمودار با استفاده از تکنیک های پیشرفته CSS توسط یک تصویر رنگی و حرکت آن به موقعیت های مختلف ، مقادیر و میزان ارتفاع آنها در نمودار مشخص میشود .

کد CSS :

#vertgraph {                    
 width: 378px; 
 height: 207px; 
 position: relative; 
 background: url("g_backbar.gif") no-repeat; 
}
#vertgraph ul { 
width: 378px; 
height: 207px; 
margin: 0; 
padding: 0; 
}
#vertgraph ul li {  
position: absolute; 
width: 28px; 
height: 160px; 
bottom: 34px; 
padding: 0 !important; 
margin: 0 !important; 
background: url("g_colorbar3.jpg") no-repeat !important;
text-align: center; 
font-weight: bold; 
color: white; 
line-height: 2.5em;
}

#vertgraph li.critical {left: 24px; background-position: 0px bottom !important;}
#vertgraph li.high {left: 101px; background-position: -28px bottom !important;}
#vertgraph li.medium {left: 176px; background-position: -56px bottom !important;}
#vertgraph li.low {left: 251px; background-position: -84px bottom !important; }
#vertgraph li.info {left: 327px; background-position: -112px bottom !important;}

کد XHTML :

<div id="vertgraph">
    <ul>
        <li class="critical" style="height: 150px;">22</li>
        <li class="high" style="height: 80px;">7</li>
        <li class="medium" style="height: 50px;">3</li>
        <li class="low" style="height: 90px;">8</li>
        <li class="info" style="height: 40px;">2</li>
    </ul>
</div>



● مشاهده دموی نمودارهای رسم شده توسط CSS
● دانلود کد منبع کامل نمودارها

Loading