در این جلسه با ادامه موضوع مربوط به رسم نمودار با 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 صورت استفاده کنید.
- رفتن و به سایت jQuery و دانلود آخرین نسخه اون و قرار دادن اون در پوشه پروژتون
- روش دومی که میتونین از اون استفاده کنید، 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 هم دو راه وجود داره.
- به سایت اون برید و اونو دانلود کنید
- از CDN استفاده کنید
اگه از روش اول استفاده کرده باشید، کدی که در فایل HTML قرار میدین، بصورت زیر هست:
<script src="/highcharts/highcharts.js"></script>
اگه بخواین از نسخه CDN استفاده کنید، میتونین از کد زیر استفاده کنید:
<script src="http://code.highcharts.com/highcharts.js"></script>
در جلسه بعدی در مورد Syntax و نوع تنظیمات اون صحبت میکنیم.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !