فرازگر

رسم نمودار X-Y با Chart.js (نمودار Scatter یا پراکندگی)

سم نمودار X-Y با Chart.js (نمودار Scatter یا پراکندگی)

نمودار پراکندگی یکی از مهمترین نمودارهایی است که برای کارهای علمی استفاده می شود. از این نمودار برای مشخص نمودن پراکندگی داده ها، توزیع داده ها و رنج داده ها و همچنین رابطه دو متغیر در معادلات خطی و غیر خطی مشخص می گردد. در این مقاله می خواهیم به نحوه رسم نمودار X-Y با Chart.js (نمودار Scatter یا پراکندگی) بپردازیم.

شروع کار با Chart js

  • در گام نخست ابتدا فایل HTML خود را تنظیم می‌کنیم.
  • سورس یا CDN کتابخانه را در تگ head اضافه می‌کنیم.
  • برای آنکه نمودار ها را بتوانیم نمایش بدهیم نیاز داریم یک تگ Canvas تعریف کنیم.

CDN های Jquery , Chart js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js

رسم نمودار X-Y با Chart.js و معرفی تنظیمات آن

در زیز مثالی از نمودار X-Y را برای شما آماده کردیم و در ادامه تنظیمات آن را مورد بررسی قرار دادیم.

مشاهده نتیجه

 

			var ctx = document.getElementById("myChart").getContext('2d');

// Define the data 
				var data = [{
								x: 0,
								y: 4
							}, {
								x: 1,
								y: 14
							},
							{
								x: 2,
								y: 12
							},
							{
								x: 3,
								y: 10
							},
							{
								x: 3.5,
								y: 4
							},
							{
								x: 4.5,
								y: 5
							},
							{
								x: 5.5,
								y: 8
							},
							{
								x: 6,
								y: 12
						
							}]; // Add data values to array

							

							
// End Defining data

var options = {responsive: true, // Instruct chart js to respond nicely.
			   maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height 
			   title: {
						display: true,
						text: "نمودار پراکندگی"
					  },
			  legend: {
						display: false,
					  },
					  
			  scales: {
						yAxes: [{
								display: true,
								//type: 'linear',
								position: "left",
								scaleLabel: {
									display: true,
									labelString: 'Rank',
									fontSize: 16,
									fontColor: "black",							
								},
								
								gridLines: {
									display: true,
									//color: 'grey',
								},

									
								ticks: {
									beginAtZero:true,
									fontSize: 14
								}
							   }],
							   
					    xAxes: [{						
								display: true,
								scaleLabel: {
									display: true,
									labelString: 'Time (Minutes)',
									fontSize: 16
								},
								ticks: {
									beginAtZero:false,
									fontSize: 14,
									maxTicksLimit: 10,
								}
								}]
				       },

				};

// End Defining data
var myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
			  label: 'Population', // Name the series
			  data: data, // Specify the data values array
			  borderColor: '#2196f3', // Add custom color border            
			  backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
        showLine: true,
        fill: false,
        tension: 0,
        pointRadius: 5,
        pointHoverRadius: 7,
        borderWidth: 2,
            }]
    },
    options: options
});
  • در خط 5 با یک Array Object داده هایمان را بر اساس x , y وارد می کنیم.
  • در خط 43 متغیری به نام Options تعریف کردیم و تنظیمات Style نمودار از قیبل پس زمینه، واکنش گرا شدن و زنگ ها و لیبل های محور افقی و عمودی را مشخص کردیم. که با کمی دقت می توانید آن را به دلخواه خود تغییر دهید.
  • خط 95 در واقع تنظیمات اصلی ایجاد نمودار است.
  • در خط 100 نوشته شده  data: data در واقع منظور از data دوم همان Array Object است که در بالا داده هایمان بر اساس x,y تنظیم کردیم.
  • در خط 103 خاصیت showline حتما باید true باشد تا نقاط نمودار بصورت پیوسته بشکل خط نمایش داده شود.
  • در خط 104 خاصیت fill بهتر است بر روی false باشد تا سطح زیر نمودار رنگی نشود.
  • و خطوط 105 تا انتها مربوط به style های خود خط نمودار است برای نمونه با مقدار دادن به خاصیت tension می توانید شکستگی خطوط را نرم تر کنید.

 

از این که ما را در مقاله رسم نمودار X-Y با Chart.js همراهی کردید از شما سپاس گذاریم.

 

مقاله پیشنهادی :

 

دیدگاه‌ها (0)

  • دیدگاه های فینگلیش تایید نخواهند شد.
  • دیدگاه های نامرتبط به مطلب تایید نخواهد شد.
  • از درج دیدگاه های تکراری پرهیز نمایید.

*
*