تخفیف ویژه

آموزش رسم نمودار با Highcharts (جلسه 3) - تنظیمات و کدنویسی - قسمت اول

دسته بندی: جاوا اسکریپت
زمان مطالعه: 3 دقیقه
۲۲ اردیبهشت ۱۳۹۵

در این جلسه با ادامه موضوع مربوط به رسم نمودار با Highcharts در خدمتتون هستم. highcharts

در این قسمت بهتون بصورت قدم به قدم آموزش میدیم که چطور نمودارهاتون رو با استفاده از Highcharts بسازید و تنظیمات مورد نظرتون رو در اون قرار بدین.

قدم 1 : ساخت صفحه HTML

در ابتدا یک فایل بنام index.html درست میکنیم و کدهای زیر رو در اون قرار میدیم:

<html>
<head>
	<title>Highcharts Tutorial</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
	<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

	<script language="JavaScript">
		$(document).ready(function() {
			
		});
	</script>
</body>
</html>

همونطور که دیدید در ابتدا و در قسمت Head کتابخانه‌های jquery و highcharts رو قرار دادیم و لود کردیم. بعد از اون یک div با id = container قرار دادیم. این div المنتی هست که نمودار ما در اون قرار میگیره و خروجی محاسبات highcharts در اون نمایش داده میشه. در نهایت هم یک script قرار دادیم و در اون کدهای Javascript خودمون رو قرار میدیم.

قدم 2 : قرار دادن تنظیمات

Highcharts از تنظیمات ساده ای برای کشیدن نمودار استفاده میکنه و از JSON برای اینکار استفاده میکنه.

$('#container').highcharts(json);

همونطور که دیدید در ابتدا المنت container رو انتخاب کردیم و متد highcharts رو برای اون فراخوانی کردیم و بعنوان ورودی json رو بهش پاس دادیم. این متغیر json یک عبارت JSON هست که تنظیمات مورد نظر ما در اون قرار داده میشه و به این ابزار پاس داده میشه و این ابزار نمودار اون رو برای ما میکشه.

title یا عنوان:

با استفاده از این قسمت میتونین عنوان اصلی نمودار رو مشخص کنید:

var title = {
  text: 'Monthly Average Temperature'   
};

subtitle یا زیر عنوان:

با استفاده از این قسمت میتونین زیر عنوان نمودار رو مشخص کنید:

var subtitle = {
  text: 'Source: WorldClimate.com'
};

xAxis یا عناوین محور افقی:

با استفاده از این قسمت میتونین نوشته هایی که بر روی محور افقی نمایش داده میشه رو مشخص کنید:

var xAxis = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
      ,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

میبینید که برای محور افقی، ماه‌های سال میلادی رو قرار دادیم.

yAxis یا عناوین محور عمودی:

با استفاده از این قسمت میتونین نوشته هایی که بر روی محور عمودی نمایش داده میشه رو مشخص کنید:

var yAxis = {
   title: {
      text: 'Temperature (\xB0C)'
   },
   plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
   }]
};

میبینید که برای محور عمودی یک عنوان قرار دادیم و برای اون درجه سانتی گراد رو مشخص کردید، با استفاده از plotline هم میتونین خطی افقی رسم کنید. میبینید که عرض خط 1 پیکسل هست و رنگ اون هم مشخص کردیم.

Tooltip:

با استفاده از این قسمت میتونین کاری کنید که با هاور کردن بر روی نقاط محورهای رسم شده، یک tooltip باز بشه و اطلاعات اون نقطه رو نمایش بده:

var tooltip = {
   valueSuffix: '\xB0C'
}

در قسمت بعدی این موضوع رو به پایان میرسونیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.