X
تبلیغات
رایتل
آموزش کشیدن نمودار با css - کدهای حرفه ای وبلاگ و سایت
کدهای Css3 , JavaScript, PHP و HTML
آموزش کشیدن نمودار با css
یکشنبه 12 شهریور 1391 ساعت 21:56 | نوشته ‌شده به دست ایمان فـخــار

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

  1. کارکرد ماه اول : دو میلیون و پانصد هزار ریال

  2. کارکرد ماه دوم : دویست هزار ریال

  3. کارکرد ماه سوم چهار میلیون ریال

  4. کارکرد ماه چهارم : سه میلیون و هفتصد و بیست و سه هزار ریال

  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

 

کدهای این بخش

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

چاپ این مطلب: کلیک کنید

(1 لایک)
نظرات (0)
برای نمایش آواتار خود در این وبلاگ در سایت Gravatar.com ثبت نام کنید. (راهنما)
نام :
پست الکترونیک :
وب/وبلاگ :
ایمیل شما بعد از ثبت نمایش داده نخواهد شد
 
ابر برجسب
آمار
بازدیدکنندگان : 304152