آموزش رسم نمودار با Highcharts (جلسه 11) - نمودارهای سطحی - قسمت 2

- visibility ۲ mode_comment

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

نمونه سوم : نمودار سطحی بصورت Normal Stack

نمودارهای ستونی و سطحی میتونن بجای اینکه با هم دیگه غاطی و مخلوط بشن، Stack بشن و هر کدام بالای دیگری نمایش داده بشه. به دو صورت میتونین این عمل Stack شدن رو اعمال کنید. یکی normal هست و دیگری percent. کل کدهای مربوط به این نمونه رو در اختیارتون میزارم و بعد براتون توضیح میدم:

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

با استفاده از ویژگی type، نوع نمودار را area یا سطحی در نظر گرفتیم.  برای محور x کدهای زیر رو قرار دادیم:

میبینید که با استفاده از ویژگی categories عناوینی که بر روی محور x قصد داریم قرار بگیره رو مشخص کردیم. با on قرار دادن ویژگی tickmarkPlacement باعث میشه که خطهای ریز موجود بر محور افقی، دقیقا در محل همون نقاطی که در categories مشخص کردیم قرار بگیرن. بعد از اون title رو هم برای محور افقی غیرفعال کردیم و نمایش نمیدیم.

اصلی ترین قسمت این کد مربوط به کدهای plotOptions هست:

میبینید که درون خصوصیت Area، مقدار ویژگی stacking رو برابر با normal قرار دادیم. اگه اینکارو نمیکردیم نمودار بصورت زیر نمایش داده میشد:normal stack

همونطور که دیدید نمودارها با هم غاطی شده. اگر از normal stacking استفاده کنیم بصورت زیر خواهد شد و خیلی مرتب تر میشه:normal stack 2

نمونه چهارم : نمودار سطحی بصورت percent stack

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

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

میبینید که فرقش با قبلی اینه که بجای normal از percent استفاده شده. خروجی بصورت زیر هست:percent stack

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

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

یا علی

Source

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

ممنون دوست عزیز… خیلی خوب توضیح دادین 😉

محمد اسفندیاری

خوشحالم که بدردتون خورده
موفق باشید

نیاز به لاگین

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