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

- visibility ۰ mode_comment

در این مطلب میخوام یک ابزار بنام 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

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

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

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

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

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

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.