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

دسته بندی: جاوا اسکریپت
زمان مطالعه: 2 دقیقه
۲۱ اردیبهشت ۱۳۹۵

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

انواع نمودارها

Highcharts از نمودارهای زیر پشتیبانی میکنه:

  • Line Charts : برای کشیدن نمودارهای خطی و spline
  • Area Charts : برای کشیدن نمودارهای سطحی
  • Pie Charts : برای کشیدن نمودارهای دایره ای
  • Scatter Charts : برای کشیدن نمودارهای پراکندگی
  • Bubble Charts : برای کشیدن نمودارهای حبابی
  • Dynamic Charts : برای کشیدن نمودارهای پویا و داینامیک
  • Combination : استفاده از ترکیبی از نمودارهای مختلف
  • 3D Charts : برای کشیدن نمودارهای سه بعدی
  • Angular Gauges : برای کشیدن نمودارهای زاویه ای
  • Heat Map : برای کشیدن نمودارهای حرارتی
  • Tree Maps : برای کشیدن نمودارهای درختی و شاخه ای

در قسمتهای بعدی هر کدام از این موارد رو براتون توضیح میدیم و برای هر کدوم مثالهای مختلفی رو قرار میدیم.

راه اندازی Highcharts

Hightlight برای کار کردن به jQuery نیاز داره و برای استفاده از اون باید jQuery رو هم در سایتتون لود کنید. همونطور که خودتون بهتر میدونید، میتونید از jQuery به 2 صورت استفاده کنید.

  1. رفتن و به سایت jQuery و دانلود آخرین نسخه اون و قرار دادن اون در پوشه پروژتون
  2. روش دومی که میتونین از اون استفاده کنید، CDN هست. با استفاده از CDN میتونین Performance سایتتون رو ارتقاء بدین.

اگه از روش اول استفاده کنید باید چنین کدی رو در صفحه HTML خودتون قرار بدین:

<script src="/jquery/jquery.min.js"></script>

اگر از نسخه CDN بخاید استفاده کنید چیزی شبیه به زیر خواهد شد:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

میبینید که ما از نسخه 2.1.3 استفاده کردیم و شما میتونین از نسخه ای که دوست دارید استفاده کنید.

خب تا اینجا jQuery رو قرار دادیم. حالا میریم سراغ Highcharts و قرار دادن اون.

نصب Highcharts

مثل jQuery برای Highcharts هم دو راه وجود داره.

  1. به سایت اون برید و اونو دانلود کنید
  2. از CDN استفاده کنید

اگه از روش اول استفاده کرده باشید، کدی که در فایل HTML قرار میدین، بصورت زیر هست:

<script src="/highcharts/highcharts.js"></script>

اگه بخواین از نسخه CDN استفاده کنید، میتونین از کد زیر استفاده کنید:

<script src="http://code.highcharts.com/highcharts.js"></script>

در جلسه بعدی در مورد Syntax و نوع تنظیمات اون صحبت میکنیم.

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

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

یا علی

Source

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

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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