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

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



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

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

0 331 ۲۴ اردیبهشت ۹۵

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

با استفاده از این دسته از نمودارها میتونین هر نمودار خطی (line) یا spline رو ساخته و در سایتتون قرار بدین. تنها فرق نمودارهای line و spline در اینه که در نمودار های spline خطهایی که نقاط رو به هم متصل میکنن با شیب ملایمی به هم وصل میشن ولی در نمودارهای line این نقاط با استفاده از خط راست به هم وصل میشوند.

نمونه اول : نمودار خطی ساده

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

تقریبا کد بالا همون کدی هست که در جلسه قبل در مورد اون براتون توضیح دادم. اگه بخایم هر کدوم از قسمتهایی که در کد قرار دادیم رو بر روی نمودار براتون نامگذاری کنم بصورت زیر خواهد شد:highcharts

اگه خروجی رو ببینیم بصورت زیر هست:basic line

نمونه دوم : نمودار بهمراه label

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

تنها فرقی که با نمودار اولی کرده اینه که کد زیر به اون اضافه شده:

مینید که درون ویژگی plotOptions، ویژگی line رو قرار داده و میخاد یک سری از تنظیمات اون رو تغییر بده.

با استفاده از ویژگی dataLabels و true قرار دادن اون عددهای هر کدوم از نقاط در کنارشون نمایش داده میشه. با استفاده از false قرار دادن ویژگی enableMouseTracking هم زمانی که بر روی نقاط Hover میکنید، Tooltip نمایش داده نمیشه و اثری نداره. خروجی این حالت بصورت زیر هست:line chart label

در قسمتهای بعد نمونه های دیگه ای رو در اختیارتون میزارم.

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram