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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 180 ۲۵ خرداد ۹۵

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

نمونه اول : نمودار ستونی سه بعدی

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

میبینید که در ابتدا علاوه بر کتابخانه Highcharts، کدهای مخصوص برای پشتیبانی از حالت سه بعدی هم اضافه شدن:

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

میبینید که با استفاده از ویژگی renderTo کاری کردیم که نتیجه نمودار سه بعدی در المنت container رندر و نمایش داده بشه. میبینید که نوع اون رو ستونی قرار دادیم و همچنین فاصله اون از اطراف رو 75 پیکسل در نظر گرفتیم. با استفاده از ویژگی options3d هم تنظیمات اون رو مشخص کردیم. با استفاده از true قرار دادن ویژگی enabled، حالت سه بعدی رو برای نمودار فعال میکنیم. با استفاده از alpha زاویه چرخش نمودار حول محور افقی و با استفاده از ویژگی beta، زاویه چرخش رو حول محور عمودی مشخص میکنیم. با استفاده از ویژگی depth هم عمق یا ضخامت کل نمودار رو مشخص میکنیم. با ویژگی viewDistance هم فاصله ناظر ار نمودار رو برابر با 25 پیکسل قرار دادیم تا کاربران بتونن به درستی حالت سه بعدی رو ببینن.

تا اینجا نمودار درسته و کار دیگه ای نداره. اما میتونیم با استفاده از قرار دادن ورودی هایی از نوع range، کاری کنیم که با تغییر دادن اونا، زوایای چرخش نمودار نیز تغییر کنه. برای اینکار ابتدا کدهای HTML زیر رو قرار میدیم:

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

میبینید که از رویداد change برای ورودی ها استفاده کردیم و در جاهای مختلف هم از تابع showValues استفاده کزدیم. خروجی بصورت زیر خواهد بود:3d column chart

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram