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

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



  آیا می دانید تا کنون 6335 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

2 209 ۱۳ خرداد ۹۵

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

نمونه نهم : نمودار ستونی با استفاده از داده های حدول HTML

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

میبینید که در انتها یک table قرار داده شده:

میبینید که برای اون id برابر با datatable رو قرار دادیم. حالا قصد داریم که از روی داده های این جدول، یک نمودار رسم کنیم. برای اینکار بصورت زیر عمل میکنیم:

میبینید که درون متغیر data که اطلاعات نمودار رو مشخص میکنه، id اون جدول مورد نظر رو درون ویژگی table قرار دادیم. با اینکار از داده های موجود در جدول با id ذکر شده، یک نمودار ستونی رسم میشه. خروجی بصورت زیر است:column table charts

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

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

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

میبینید که نوع نمودار رو برابر با columnrange قرار دادیم و با استفاده از true قرار دادن ویژگی inverted باعث میشیم که این نمودار بجای رسم شدن بصورت عمودی، بصورت افقی نمایش داده بشه. متغیر Series هم بصورت زیر قرار دادیم:

میبینید که برای هر کدوم یک حداقل و یک حداکثر قرار دادیم. خروجی بصورت زیر است:column range chart

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

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

یا علی

Source

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

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    سلام آقای اسفندیاری خیلی ممنون بابت مطالب خوبتون میخواستم بپرسم اون فایل گیف آخر پست رو چجوری و با چه نرم افزاری ساختید ؟

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram