طراحی و بهینه سازیمشاهده

هاست

اسکریپت رسم نمودار Highcharts

CSS , CSS / HTML , HTML5 , آموزش طراحی , اسکریپت ها

اسکریپت Highcharts، کتابخانه ای از انواع نمودارهای خطی، دایره ای، ستونی، پراکنده و… است. Highcharts با بهره گیری از جاوا اسکریپت و html5 دارای انواعی از طرح های زیبا و کاربرپسند است و با داشتن مستنداتی بسیار قوی، این قابلیت را دارد که به راحتی توسط طراحان و توسعه دهندگان، به کار گرفته شود. (نمونه این اسکریپت توسط آقای صوفی در افزونه آماره استفاده شده.)

اسکریپت رسم نمودار Highcharts

نحوه کار اسکریپت:
این کتابخانه بر پایه جاوا اسکریپت و جی کوئری نوشته شده و جهت کار با اون، باید از کدهایی استفاده کرد که شباهت بسیاری به زبان json دارند. همچنین، این اسکریپت از طرح های مختلفی برخورداره و هر کدوم از این طرح ها دارای تنظیمات مخصوص به خودشون هستند. هدف ما از این پست، آشنا کردن شما با این اسکریپت در یک مثال rtl شده است. (جهت مطالعه بیشتر میتونید مستندات این اسکریپت رو در آدرس Highcharts.com مطالعه کنید.)

 

3 گام اساسی استفاده:
1- فراخوانی فایل highcharts.js به همراه جی کوئری در صفحه. (نکته: برای گرفتن خروجی چاپ و تصویر،فایل exporting.js رو هم باید فراخوانی کنید.)
2- تعریف یک div در html به همراه ویژگی کلاس یا آی دی! به عنوان نمونه:

3- فراخوانی سکلتور div بالا و استفاده  از اون در تابع highcharts و سپس نوشتن تنظیمات اسکریپت! نمونه کد استفاده شده در پیش نمایش به صورت زیر:

 

توضیحات:
خطHighcharts.setOptions، برای ست کردن یک سری تنظیمات کلیه و همونطور که در محتوای اون قابل مشاهده است، به تنظیمات chart چند استایل ساده مثل نوع و سایز فونت رو دادیم.

و اما بخش اصلی پس از فراخوانی تابع highcharts شروع میشه! در اینجا باید از یک سری تنظیمات اولیه استفاده و مقدارهایی رو جهت نمایش نمودار وارد کنیم. تنظیمات مهم کتابخانه و محل تأثیر اونها (در قطعه کد بالا) رو میتونید در تصویر زیر مشاهده کنید.

اسکریپت رسم نمودار Highcharts

متأسفانه توضیحات کامل تنظیمات اصلی (+ چند مورد دیگه مثل subtitle (عنوان فرعی)، تجزیه axes به xAxis و yAxis) رو نمیشه در یک پست توضیح داد و البته نیازی هم نداره! چون که میتونید به سادگی همه موراد لازم رو در API اسکریپت مطالعه کنید.


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

دانلود

به صفحه اول گوگل بياييد - قوی ترين بک لينک در ايران
بک لينک در بيش از 20 هزار وبلاگ با دهها نمونه كار


هاست پرسرعت SSD ایران (ویژه افزایش رتبه سئو)
دیتاسنتر آسیاتک - مجهز به کلود لینوکس و لایت اسپید


مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1393/04/29 7 CSS , CSS / HTML , HTML5 , آموزش طراحی , اسکریپت ها

لینک کوتاه مطلب : http://www.20script.ir/?p=7539

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
7,770دانلود قالب فروشگاهی ووکامرس Shopkeeper نسخه 2.2.6 تاریخ : 1396/08/1
4,399افزونه نوار پروژه های در حال انجام حرفه ای تاریخ : 1393/01/15
2,161آموزش افزودن متن دلخواه آخر مطالب وردپرس تاریخ : 1394/12/23
1,860اسکریپت کسب درآمد از طریق نمایش ویدیو PaidVids تاریخ : 1395/12/2
556اسکریپت راه اندازی مخزن کد رنگ ها CSSGradients تاریخ : 1396/09/11
2,843اسکریپت فروشگاه ساز LiteCart نسخه 1.0.1.2 تاریخ : 1392/08/7
3,104اسکریپت پرسش و پاسخ Question2Answer فارسی نسخه 1.6.2 تاریخ : 1392/08/24
3,040صفحه 404 بسیار زیبا Spotlook به صورت HTML5 تاریخ : 1392/09/19
868اسکریپت کوتاه کننده لینک Short URL Expander تاریخ : 1396/09/1
3,152اسکریپت مدیریت صورت حساب Invoice PRO تاریخ : 1393/12/26
2,198پلاگین جی کوئری دکمه اشتراک گذاری مطالب در موبایل تاریخ : 1395/02/11
1,769دکمه دانلود آبی و نارنجی به صورت لایه باز تاریخ : 1392/09/9
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب