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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

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

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

در این قسمت بهتون بصورت قدم به قدم آموزش میدیم که چطور نمودارهاتون رو با استفاده از Highcharts بسازید و تنظیمات مورد نظرتون رو در اون قرار بدین.

قدم 1 : ساخت صفحه HTML

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

همونطور که دیدید در ابتدا و در قسمت Head کتابخانه های jquery و highcharts رو قرار دادیم و لود کردیم. بعد از اون یک div با id = container قرار دادیم. این div المنتی هست که نمودار ما در اون قرار میگیره و خروجی محاسبات highcharts در اون نمایش داده میشه. در نهایت هم یک script قرار دادیم و در اون کدهای Javascript خودمون رو قرار میدیم.

قدم 2 : قرار دادن تنظیمات

Highcharts از تنظیمات ساده ای برای کشیدن نمودار استفاده میکنه و از JSON برای اینکار استفاده میکنه.

همونطور که دیدید در ابتدا المنت container رو انتخاب کردیم و متد highcharts رو برای اون فراخوانی کردیم و بعنوان ورودی json رو بهش پاس دادیم. این متغیر json یک عبارت JSON هست که تنظیمات مورد نظر ما در اون قرار داده میشه و به این ابزار پاس داده میشه و این ابزار نمودار اون رو برای ما میکشه.

title یا عنوان:

با استفاده از این قسمت میتونین عنوان اصلی نمودار رو مشخص کنید:

subtitle یا زیر عنوان:

با استفاده از این قسمت میتونین زیر عنوان نمودار رو مشخص کنید:

xAxis یا عناوین محور افقی:

با استفاده از این قسمت میتونین نوشته هایی که بر روی محور افقی نمایش داده میشه رو مشخص کنید:

میبینید که برای محور افقی، ماه های سال میلادی رو قرار دادیم.

yAxis یا عناوین محور عمودی:

با استفاده از این قسمت میتونین نوشته هایی که بر روی محور عمودی نمایش داده میشه رو مشخص کنید:

میبینید که برای محور عمودی یک عنوان قرار دادیم و برای اون درجه سانتی گراد رو مشخص کردید، با استفاده از plotline هم میتونین خطی افقی رسم کنید. میبینید که عرض خط 1 پیکسل هست و رنگ اون هم مشخص کردیم.

Tooltip:

با استفاده از این قسمت میتونین کاری کنید که با هاور کردن بر روی نقاط محورهای رسم شده، یک tooltip باز بشه و اطلاعات اون نقطه رو نمایش بده:

در قسمت بعدی این موضوع رو به پایان میرسونیم.

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram