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

- visibility ٠ mode_comment

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

نمونه پنجم : نمودار ستونی عمودی Stack و گروه بندی شده

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

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

کدهایی که در داخل plotOption قرار میدید تنظیمات برای همه اطلاعات درون series رو مشخص میکنن. با استفاده از همون آرایه هایی که در series قرار میگیره میتونین یکی از این تنظیمات رو بازنویسی کنید و کاری کنید که یکی از اونا با بقیه متفاوت باشه. با استفاده از ویژگی stacking میتونیم کاری کنیم که داده ها در کنار هم و پشت سر هم قرار بگیرن و دید بهتری به کاربر بدن. برای این ویژگی سه مقدار null و percent و normal وجود داره که ما در بالا از normal استفاده کردیم.

میبینید که درون series تعدادی عضو وجود داره و هر کدوم از اعضاء یک ویژگی بنام stack دارن. ما از این ویژگی برای دسته بندی و گروه بندی داده ها استفاده میکنیم. میبینید که دو تا از اعضاء رو برابر با male یا آقایان و دو مورد از اونا رو female یا بانوان قرار دادیم. با استفاده از این کار باعث میشیم که male ها بصورت جدا و female ها هم بصورت جدا گروه بندی شده و بصورت normal stack پشت سر هم قرار بگیرن. خروجی بصورت زیر میشه:Stacked group chart

نمونه ششم : چرخاندن عناوین و مقادیر نمودار ستونی

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

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

میبینید که در ویژگی labels از متغیر xAxis تعدادی ویژگی قرار دادیم. با استفاده از rotation میتونین عناوین رو بچرخونید. میبینید که در کد بالا 45 درجه مشخص شده. با استفاده از fontSize و fontFamily هم میتونین سایز و نوع فونت رو مشخص کرده و نمایش بدین.

حالا برای چرخوندن مقادیر بر روی نمودار بصورت زیر عمل میکنیم:

میبینید که مثل همیشه اطلاعاتمون رو درون متغیر Series قرار دادیم و در اینجا یک ویژگی dataLabels به اون اضافه کردیم که خودش شامل تعدادی ویژگی دیگه هست که لیبلهای داده ها رو دستکاری میکنه. میبینید که در ابتدا اون رو فعال کردیم و بعد از اون 90 درجه چرخوندیمش و رنگ و ترازبندیش رو مشخص کردیم. سایز و نوع فونت اون رو مشخص کردیم و 10 پیکسل هم به سمت پایین آوردیمش. خروجی بصورت زیر میشه:rotated label chart

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

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

یا علی

Source

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

نیاز به لاگین

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