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

دسته‌ها : آموزش, جی کوئری, وردپرس علی میرزائی 8 دیدگاه‌ها

نمودار جی کوئری highchart

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

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

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

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

۳- فراخوانی سکلتور 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 شروع میشه! در اینجا باید از یک سری تنظیمات اولیه استفاده و مقدارهایی رو جهت نمایش نمودار وارد کنیم. تنظیمات مهم کتابخانه و محل تأثیر اونها (در قطعه کد بالا) رو میتونید در تصویر زیر مشاهده کنید…

آشنایی با نمودار جی کوئری highchart

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

منبع: دنیای وردپرس و برنامه نویسی

دیدگاه کاربران در مورد این نوشته

  1. سلام دوستان
    Highcharts برای برنامه ی تجاری پولیه، کسی میدونه چطور میشه کرک اون رو پیدا کرد که در پروژه ی تجاری هم بشه ازش استفاده کرد؟

    توسط حامد پاسخ

  2. بازهم عالی بود

    توسط امیر علی پاسخ

    1. ممنون امیر علی جان {گل}

      توسط علی میرزائی پاسخ

  3. سلام لینک دانلود خرابه

    توسط ممد پاسخ

    1. سلام،
      بررسی شد، لینک دانلود کاملا سالم.

      توسط علی میرزائی پاسخ

  4. عالی بود

    توسط مهدی پاسخ

  5. سلام آقا علی
    من یک ایمیل برای طراحی قالب سایت براتون فرستادم ، به دستتون رسید

    توسط مجید پاسخ

    1. سلام،
      بله، پاسخ رو امروز ایمیل کردم.

      توسط علی میرزائی پاسخ

دیدگاه خود را بیان کنید