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

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



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

آموزش رسم نمودار با Highcharts (جلسه 7) - نمودارهای خطی - قسمت 3

0 249 ۲۶ اردیبهشت ۹۵

در این جلسه با ادامه موضوع مربوط به رسم نمودار با Highcharts در خدمتتون هستم.
highcharts

نمونه چهارم : نمودار با اطلاعات لود شده با Ajax

در این جلسه میخایم یک نمودار خطی رو بررسی کنیم که اطلاعات و Data اون توسط Ajax لود میشه و ما میخایم که اونا رو بصورت نمودار رسم کنیم. اولین کاری که میکنیم با استفاده از متد getJSON یک فایل CSV رو با استفاده از Ajax دریافت میکنیم و بعد از اون با استفاده از اطلاعات درون اون نمودار رو رسم میکنیم.

برای کار کردن با Ajax و رسم نمودار از طریق اطلاعات بدست آمده از Ajax باید فایل data.js رو علاوه بر فایل highcharts.js لود کنید. برای اینکار به صورت زیر عمل میکنیم:

در ابتدا تمام کدهای مربوط به این نمودار رو قرار میدیم تا اونا رو ببینید:

میبینید که در خط 14 عنوان اصلی و فرعی اون رو مشخص کردیم:

بعد از اون برای محور افقی کد زیر رو قرار دادیم:

میبینید که با استفاده از ویژگی tickInterval، بازه زمانی بر روی محور افقی رو مشخص کردیم. میبینید که یک عدد مقابل اون نمایش داده شده و برابر با تعداد میلی ثانیه های موجود در یک هفته هست. با اینکار روزهایی که بر روی محور افقی قرار میگیرند دارای بازه 7 روزه هستند. با استفاده از ویژگی gridLineWidth ضخامت گریدبندی افقی رو برابر با 1 پیکسل در نظر گرفتیم. با استفاده از ویژگی labels هم موقعیت اون عناوین مربوط به محور افقی رو مشخص کردیم. میبینید که ترازبندی اون رو از سمت چپ قرار دادیم و 3 پیکسل در سمت راست و 3 پیکسل به سمت بالا حرکتش دادیم.

برای محورهای عمودی کد زیر رو قرار دادیم:

میبینید که در ابتدا ویژگی های مربوط به محور عمودی سمت چپ رو مشخص کردیم و بعد از اون تنظیماتی نیز برای سمت راست در نظر گرفتیم. عنوان برای محورها نزاشتیم و با استفاده از ویژگی labels موقعیت و فرمت عناوین محورها رو مشخص کردیم. اگر ویژگی format رو در نظر نمیگیرفتیم بجای نوشتن 20000 عبارت 20k نمایش داده میشد. با استفاده از ویژگی showFirstLabel و قرار دادن اون برابر با false میتونین اولین عنوان که 0 هست رو نمایش ندادیم.

برای tooltip کد زیر رو قرار دادیم:

با استفاده از ویژگی crosshairs و قرار دادن اون برابر با true باعث میشید که زمانی که بر روی نقاط هاور میکنید یک خط عمودی صاف کشیده بشه و همه نمودارهای دیگه رو هم قطع کنه و نمودارها رو بهتر متوجه بشید. با استفاده از خاصیت shared میتونین تمامی مقادیر نمودارهای مختلف رو یک جا و همزمان درون یک tooltip ببینید. اگر این خاصیت رو برابر با False در نظر بگیرید، tooltip تنها اطلاعات همون نقطه ای که بر روی اون هاور شده رو نمایش میده.

در نهایت با استفاده از کد زیر فایل csv رو از طریق Ajax دریافت میکنیم و اون رو نمایش میدیم:

میبینید که با استفاده از متد getJSON موجود در jQuery یک در خواست Ajax فرستادیم و فایل csv در آدرس مربوطه رو دریافت کردیم. بقیه کدها هم باعث import شدن داده ها در نمودار ما میشن و نمودار با استفاده از اونا رسم میشه.

خروجی کار بصورت زیر خواهد بود:ajax data

در قسمتهای بعد نمونه های دیگه ای رو در اختیارتون میزارم.

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

موفق و پیروز باشید

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram