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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 168 ۹ خرداد ۹۵

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram