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

- visibility ٠ mode_comment

در این جلسه با ادامه موضوع مربوط به رسم نمودار با 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

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

نیاز به لاگین

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