آموزش کشیدن نمودار با css

فرض می کنیم که می خواهیم از کارکرد 5 ماه یک پیمانکار نموداری ترسیم کنیم و مراحل اولیه برای محاسبه ی کارکرد ریالی را انجام داده ایم و در حال حاضر نتیجه ای به شرح زیر داریم

کارکرد ماه اول : دو میلیون و پانصد هزار ریال
کارکرد ماه دوم : دویست هزار ریال
کارکرد ماه سوم چهار میلیون ریال
کارکرد ماه چهارم : سه میلیون و هفتصد و بیست و سه هزار ریال
کارکرد ماه پنجم: دو میلیون و هشتصد هزار ریال

اعداد را به صورت عددی و ماه ها را هم در داخل یک لایه ی span گذاشته و یک لیست تهیه می کنیم و باقی مراحل رو پی می گیریم

2,500,000 ماه اول
200,000 ماه دوم
4,000,000 ماه سوم
3,723,000 ماه چهارم
2,800,000 ماه پنجم

کدهای این بخش

مرحله اول یک پس زمینه ی گرید شده برای لایه ul تعیین می کنیم

2,500,000 ماه اول
200,000 ماه دوم
4,000,000 ماه سوم
3,723,000 ماه چهارم
2,800,000 ماه پنجم

کد های این بخش:

مرحله دوم به لایه ی ul طول و ارتفاع می دهیم

2,500,000 ماه اول
200,000 ماه دوم
4,000,000 ماه سوم
3,723,000 ماه چهارم
2,800,000 ماه پنجم

کدهای این بخش

مرحله سوم لایه های li را به طور مساوی در طول ul تقسیم می کنیم
برای اینکار به ul خاصیت position:relative; و به لایه های li خاصیت position:absolute; می دهیم

2,500,000 ماه اول
200,000 ماه دوم
4,000,000 ماه سوم
3,723,000 ماه چهارم
2,800,000 ماه پنجم

کدهای این بخش

در این مرحله با ضریب یک به روی ده هزار به مقادیر ریالی اندازه ی height را برای هر li تعریف می کنیم
ما با استفاده از خاصیت rgba لایه هامون رو به حالت شفاف ترسیم کردیم تا گرید زیر لایه دیده بشه

2,500,000 ماه اول
200,000 ماه دوم
4,000,000 ماه سوم
3,723,000 ماه چهارم
2,800,000 ماه پنجم

کدهای این بخش

با اضافه کردن یک لایه ششم در موقعیتی خارج از مساحت ul به گرید های جدول مقدار می دیم که خوانا باشند

2,500,000 ماه اول
200,000 ماه دوم
4,000,000 ماه سوم
3,723,000 ماه چهارم
2,800,000 ماه پنجم
4,000,000 3,500,000 3,000,000 2,500,000 2,000,000 1,500,000 1,000,000 50,0000

کدهای این بخش

کد کامل
لینک دانلود

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ترسیم نمودار با دستورات css</title>
<style type="text/css">
.chart {list-style:none;margin:0 auto;padding:0;background:#eee url('chartbg.gif');direction:rtl;text-align:right; 
height:400px;width:375px;position:relative;}
.chart li{display:inline-block;position:absolute;width:75px;bottom:0px; 
color:#fff;font-weight:bold;text-align:center;text-shadow:1px 1px 0px rgba(0, 0, 
0, .5);font-size:small;}
.chart li span { text-shadow:none; font-size:medium;}
.chart li .month 
{display:block;position:absolute;line-height:24px;height:24px;right:0px;left:0px;bottom:-24px;font-weight:bold;color:#000000;text-align:center;}
#li1 {right:0px;background:rgba(51, 102, 204, .5);height:250px; }
#li2 {right:75px;background:rgba(51, 204, 102, .5);height:20px; }
#li3 {right:150px;background:rgba(102, 51, 204, .5);height:400px; }
#li4 {right:225px;background:rgba(102, 204, 51, .5);height:372.3px; }
#li5 {right:300px;background:rgba(204, 102, 51, .5);height:280px; }
#li6 {left:-150px;width:150px;height:400px;color:#000000;}
#li6 span 
{display:block;width:100px;height:49px;font-weight:bold;direction:ltr;border-top:1px 
#c0c0c0 solid;text-align:left;}
#li6 span:nth-child(even) 
{color:#808080;font-size:x-small;text-align:right;width:50px;margin-left:50px;font-weight:normal;}
</style>
</head>
<body>
<ul class="chart"><li id="li1"> 2,500,000 ماه اول </li><li 
id="li2"> 200,000 ماه دوم </li><li id="li3"> 
4,000,000 ماه سوم </li><li id="li4"> 3,723,000 ماه چهارم </li><li id="li5"> 2,800,000 ماه پنجم </li><li 
id="li6">4,000,0003,500,0003,000,0002,500,0002,000,0001,500,0001,000,00050,0000</li></ul>
</body>
</html>

ایمان فـخــار یکشنبه 12 شهریور 1391 ساعت 21:56

کدهای حرفه ای وبلاگ و سایت

کدهای حرفه ای وبلاگ و سایت

درباره من