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

آخرین ارسال های تالار مشاهده انجمن

عنوانپاسخبازدیدتوسط
iconforumمشکل با بنرهای تلگرام05saied128
iconforumبالا نیامدن سایت در لینک اصلی08arminit
iconforumعلائم هموروئيد1191elahe
iconforumدوزبانه کردن سایت06AHF-victory
iconforumدرخواست اسکریپت کوتاه کننده لینک08sultansulay
iconforumاسکریپت و افزونه بانک پاسارگاد012H A S A N
iconforumلایک وردپرس011AHF-victory
iconforumافزونه کوتاه کننده381AHF-victory
iconforumاسکریپت ptciran793mostafaHD
iconforumلوگو سایت تفریحی452xara_2009
iconforumهنگام نصب اسکریپت تراوین با دیتا بیس مشکل دارم447xara_2009
درگاه پرداخت
درگاه پرداخت

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

CSS , CSS / HTML , HTML5 , آموزش طراحی , اسکریپت ها
اسکریپت رسم نمودار HighchartsReviewed by Admin on Jul 20Rating:

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

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

 

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

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

 

حتما بخوانید  آموزش ارسال اطلاعات یک فرم به ایمیل

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

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

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


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

دانلود

خرید هاست حرفه ای سازگار با انواع اسکریپت همراه با نصب رایگان

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

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

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
3,610قالب فروشگاهی آلفاتل HTML تاریخ : 1392/08/8
2,108دانلود قالب رستوران داری Brasserie فارسی برای وردپرس تاریخ : 1394/06/3
1,823پوسته دکتر پلاس برای وردپرس تاریخ : 1394/12/7
2,135محافظت از سایت شما از حملات DDos با اسکریپت phpGuard تاریخ : 1393/02/10
2,426اسکریپت شبکه اجتماعی Crea8social نسخه ۳ همراه با افزونه چت تاریخ : 1393/10/26
3,377دانلود فرم ارسال دیدگاه بسیار زیبا جی کوئری تاریخ : 1392/09/3
3,130قالب شرکتی و چند منظوره Sydney برای وردپرس تاریخ : 1395/01/6
1,870افزونه نمایش نقشه کره زمین Interactive World Maps برای وردپرس تاریخ : 1395/07/2
2,996کد نمایش چند تبلیغ بنری در یک مکان به صورت تصادفی تاریخ : 1394/06/28
6,149اسکریپت آپلود و اشتراک گذاری فایل Yetishare فارسی نسخه 4.3 همراه با درگاه زرین پال تاریخ : 1395/03/7
1,579اسکریپت پشتیبان گیری وب سایت Smart تاریخ : 1392/08/1
2,486اسکریپت جامعه اشتراک گذاری تصاویر Flippy FavIt تاریخ : 1395/04/3
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب