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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

morris : رسم نمودارهای زیبا به راحتی آب خوردن!

2 1968 ۲۳ اسفند ۹۳

در این مطلب میخوام یک ابزار بنام highlightjs رو خدمتتون معرفی کنم که با استفاده از اون میتونین به راحتی هر چه تمامتر برای سایت خودتون نمودارهای زیبا و پیشرفته ای رو قرار بدین و رابط کاربری سایتتون رو ارتقاء بدین. با استفاده از این ابزار میتونین نمودارهای خطی ، سطحی، ستونی و دایره ای رو رسم کنید.

morris

 

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

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به فایلهای morris.css و jquery.min.js و raphael-min.js و morris.min.js نیاز داریم.

من این فایلهارو رو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید. حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم.

همونطور که مشاهده میکنید ، برای هر نمودار یک div با همان نام قرار دادیم و عرض و طول اونا رو با استفاده از CSS مشخص کردیم.

رسم نمودار خطی ( Line ) :

باید در تگ اسکریپت نهایی کدهای زیر رو قرار بدین :

میبینید که در ابتدا با استفاده از عملگر new یک نمونه از شی Morris ساختیم و متد Line رو برای اون فراخوانی کردیم. این متد ویژگی های زیادی رو در بر میگیره که من در بالا اون ویژگی هایی که لازمه رو قرار دادم.

  • element : عنصری که قراره نمودار درون اون قرار بگیره. مقدار اون رو باید برابر با مقدار id المنت مورد نظر قرار بدین
  • data : باید در این قسمت مقادیری که قراره روی نمودار نمایش داده بشن رو قرار بدین. هر مقدار رو باید در {} قرار بدین و اولین اعضا ، تشکیل دهنده ی محور افقی هستن و از عضو دوم به بعد تشکیل دهنده ی محور عمودی.
    اگر فقط a رو بزارین ، بر روی نمودار فقط یک خط کشیده میشه و اگر میخواین چند خط روی نمودار کشیده بشه ، میتونین به تعداد دلخواه اعضاء رو زیاد کنید
  • xkey : باید مقدار این ویژگی رو برابر کلید عضو اول ویژگی data قرار بدین
  • ykeys : هر تعداد که اعضا در ویژگی data اضافه کرده باشین ، باید به ترتیب کلیدهاشونو در اینجا قرار بدین
  • labels : برای هر مقدار و خط باید یک عنوان قرار بدین تا وقتی که روی اون خط هاور میکنید ، به کاربر نشون داده بشه

رسم نمودار سطحی ( Area ) :

کاملا شبیه به Line با این تفاوت که در اینجا باید متد Area رو فراخوانی کنید.

لیست کامل ویژگی های Line و Area 

رسم نمودار ستونی ( Bar ) :

همانند قبل هست توضیحاتش.

لیست کامل ویژگی های Bar

رسم نمودار دایره ای ( Donut ) :

این نمودار ساده تر هست و کافیه که برای هر قسمت یک label و یک مقدار قرار بدین.

لیست کامل ویژگی های Donut

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

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

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

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

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    جناب اسفندیار به نظر شما این بهتره یا chartjs

    من برسی تخصصی نکردم ولی به نظرم chartjs بهتره

    نظر شما کدومه ؟

    • ‏‏
      محمد اسفندیاری(۲۴ اسفند ۱۳۹۳)

      با عرض سلام
      morris از چهار تا نمودار بیشتر پشتیبانی نمیکنه ، ولی chartjs پیشرفته تره و امکاناتش هم بیشتره
      اگر کارتون ساده هست ، پیشنهاد میکنم که از morris استفاده کنید
      موفق باشید

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram