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

- visibility ۲ mode_comment

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

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

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

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

از این ابزار استفاده میشه:
https://screentogif.codeplex.com/
موفق باشید

نیاز به لاگین

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