تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
Novin.com
تبلیغات
تبلیغات تبلیغات

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

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

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

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

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

 

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

<div id="container"></div>

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

$(function () {
		Highcharts.setOptions({
			chart: {
				style: {
					fontSize: '12px',
					fontFamily: 'Tahoma',
					textAlign:'right'
				}
			}
		});
		$('#container').highcharts({
			credits: {
				enabled: false
			},				
			title: {
				text: 'نمودار میانگین دما در شهرهای مختلف',
				x: -20,
				style: {
					fontWeight: 'bold'
				}
			},				
			subtitle: {
				text: 'بیست اسکریپت - مرجع دانلود اسکریپت',
				x: -20			
			},
			xAxis: {
				categories: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور',
					'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند']				
			},
			yAxis: {
				title: {
					text: '(°C) دما'
				},
				plotLines: [{
					value: 0,
					width: 1,
					color: '#808080'
				}]
			},
			legend: {
				rtl: true
			},
			tooltip: {
			valueSuffix: ' °C ',
			crosshairs: true,
			shared: true,
			useHTML: true
			},
			series: [{
				name: 'تهران',
				data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
			}, {
				name: 'یزد',
				data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
			}, {
				name: 'اراک',
				data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
			}, {
				name: 'زنجان',
				data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
			}]
		});
	});

 

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

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

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

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

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 1 / 5. تعداد رای : 1

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 7 CSS , CSS / HTML , HTML5 , آموزش طراحی , اسکریپت ها
لینک کوتاه مطلب : https://www.20script.ir/?p=7539
کلمات کلیدی پست :
مطالب مرتبط
10,260اسكريپت فروشگاه ساز چندمنظوره SuperCom تاریخ : 2017/09/15
10,411اسکریپت ربات هوشمند پشتیبانی از طریق چت PHP Smart Robot Chat Support تاریخ : 2015/11/3
7,650دانلود قالب ام گرافیک نسخه C112 برای وردپرس تاریخ : 2016/07/14
4,364اسکریپت راه اندازی پلتفرم حمایت از تولیدکنندگان محتوا Sponzy تاریخ : 2022/01/5
18,392افزونه وردپرس دریافت اطلاعات از IMDb نسخه 2.0.1 تاریخ : 2015/07/27
8,434قالب وبلاگی و مینیمالیستی Casper برای وردپرس تاریخ : 2016/03/25
8,513دانلود قالب آی تی سلام برای وردپرس تاریخ : 2016/01/6
4,412آموزش وارد کردن و صادر کردن بلاک‌ها در ویرایشگر Gutenberg وردپرس تاریخ : 2019/02/15
10,756اسکریپت آیکون ساز پیشرفته Icon Generator تاریخ : 2018/04/15
9,036پلاگین مخصوص سئو ویدیو Ultimate Video SEO تاریخ : 2014/01/7
11,500آموزش ویدیویی ساخت اکانت FTP تاریخ : 2014/02/1
12,537دانلود پوسته فروشگاهی Marketica برای وردپرس تاریخ : 2016/04/25
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file
تبلیغات