• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

timesheet.js : روی نمودار آوردن زمان وقایع به شکلی زیبا

0 1552 ۱۷ اسفند ۹۳

در این مطلب میخوام یک ابزار بنام timesheet رو خدمتتون معرفی کنم که با استفاده از اون میتونین وقایع و اطلاعات مورد نظرتون ، که در زمانهای متفاوتی رخ دادن رو مدیریت کنید و اونا رو بصورت تصویری و زیبا در بیارین.

timesheet

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

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به timesheet.css و timesheet.js نیاز داریم. من این فایلهارو رو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید. حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم. اولین کاری که باید بکنیم اینه که ، بیایم و محلی که قراره که اطلاعات رو بصورت تصویری در اون نمایش بدیم رو مشخص کنیم. برای اینکار یک div میسازیم با id = timesheet-default ، بصورت زیر :

حالا تنها کاری که باید بکنیم اینه که بیایم و در تگ script نهایی کدهای مورد نظرمونو بنویسیم و مشخص کنیم که چه اطلاعاتی رو میخوایم وارد کنیم. برای شروع باید یک نمونه از شئ Timesheet بسازیم و سال شروع و سال پایان رو مشخص کنیم و همچنین در [] نهایی باید اطلاعات مورد نظرمونو بنویسیم. بصورت زیر :

میبینید که در ابتدا المنتی که id مورد نظر رو داره گرفتیم و بعد از اون سال 2002 رو به عنوان آغاز و سال 2013 رو بعنوان پایان سالها مشخص کردیم. تا اینجا اگر در خروجی ببینید بصورت زیر هست :

timesheet1

بعد از اینکار باید وقایع رو یکی یکی وارد کنیم. وقایع رو باید درون [] قرار داد. هر واقعه رو باید در یک [] قرار داد و 4 مورد رو باید برای اون در نظر بگیریم. بصورت زیر :

میبینید که بین هر واقعه باید یک کاما ( , ) قرار داد. هر Event از 4 قسمت تشکیل شده :

  1. سال و ماه آغاز Event
  2. سال و ماه پایان Event
  3. متن مورد نظر و نام اون واقعه ، که در کنار خط قرار میگیره
  4. استایل خط مورد نظر که شامل موارد زیر هست :
  • default
  • lorem
  • ipsum
  • dolor
  • sit

هر کدوم از این موارد رو که قرار بدین ، رنگ اون خط عوض میشه.

در نهایت هم بگم بعضی وقتا باید عرض و ارتفاع رو تغییر بدین ، تا محتویات کاملا نشون داده بشن.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram