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

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

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

در این قسمت با ادامه تنظیمات Highcharts در خدمتتون هستیم.

legend یا فهرست علائم و راهنما:

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

var legend = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   borderWidth: 0
};

میبینید که جهت اون رو عمودی قرار دادیم و مشخص کردیم که در سمت راست نمودار نمایش داده بشه و border هم نداشته باشه. با کلیک بر روی هر کدوم از legend‌ها میتونین نمودار و خط مربوط به اون رو مخفی و نمایان کنید. این مورد رو در خروجی نمایش خواهیم داد.

series یا سری و مجموعه:

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

var series =  [
   {
      name: 'Tokyo',
      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: 'New York',
      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: 'Berlin',
      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: 'London',
      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]
   }
];

میبینید که 4 آیتم برای متغیر series قرار داده شده است و هر کدام از این آیتم‌ها دارای یک نام و یک سری از داده هستند. هر سری از این داده‌ها در نمودار یک خط رو تشکیل میده که در آخر خروجی اون رو خواهیم دید.

قدم 3 : ساخت اطلاعات JSON

حالا که تک تک جزئیات رو ساختیم و تعریف کردیم، باید اونا رو به متغیر json اصلی اضافه کنیم و اینکار بصورت زیر انجام میشه:

var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;

قدم 4 : رسم نمودار

در نهایت و در گام آخر باید با استفاده از کد زیر نمودار رو رسم کنید:

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

 

با استفاده از این کد نمودار بصورت زیبا نمایش داده میشه و تمام تنظیماتی که مورد نظرمون بوده بر روی اون اعمال میشه.

مثال:

در اینجا همه کدهای این قسمت رو قرار میدیم و از اونا خروجی میگیریم:

<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() {
   var title = {
      text: 'Monthly Average Temperature'   
   };
   var subtitle = {
      text: 'Source: WorldClimate.com'
   };
   var xAxis = {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
         'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
   };
   var yAxis = {
      title: {
         text: 'Temperature (\xB0C)'
      },
      plotLines: [{
         value: 0,
         width: 1,
         color: '#808080'
      }]
   };   

   var tooltip = {
      valueSuffix: '\xB0C'
   }

   var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
   };

   var series =  [
      {
         name: 'Tokyo',
         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: 'New York',
         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: 'Berlin',
         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: 'London',
         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]
      }
   ];

   var json = {};

   json.title = title;
   json.subtitle = subtitle;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.tooltip = tooltip;
   json.legend = legend;
   json.series = series;

   $('#container').highcharts(json);
});
</script>
</body>
</html>

خروجی:line

در قسمتهای بعدی در مورد همه موارد موجود درHighcharts بیشتر توضیح میدیم و برای هر کدام مثالهای فراوانی رو قرار میدیم که بتونین از اونا استفاده کنید.

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

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

یا علی

Source

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

جلسات دوره

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

iamonline

ممنون از مطالب مفیدتون
لطفا برای گرفتن ورودی ها از sql هم توضیح دهید

محمد اسفندیاری

در جلسه های بعدی توضیح داده شده….قسمتهای کامنت رو هم مشاهده کنید

نیاز به لاگین

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