رسم نمودار خطی با Chart.js

در قسمت قبلی سلسله مقالات آموزش Chart.js به معرفی این کتابخانه جاوا اسکریپتی پرداختیم. اما در این مطلب می خواهیم نحوه رسم نمودار خطی با Chart.js یا همان Line chart را مورد بررسی قرار دهیم و با تنظیمات آن آشنا شویم. گفتنی است این نمودار با نمودار پراکندگی داده متفاوت است و نمودار X-Y موضوع بحث مقاله بعدی ما است.

شروع کار با 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

رسم نمودار خطی با Chart.js و معرفی تنظیمات آن

یکی از کاربردهای نمودار خطی برای نمایش میزان رشد بر اساس شاخص ها زمانی (یا حتی غیر زمانی) می باشد. مثالی هم که در این قسمت در نظر گرفتیم بر همین اساس است.

رسم نمودار خطی با Chart.js

 

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

Chart.defaults.global.animation.duration = 1000;   //مدت زمان بالا امدن چارت


var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
        datasets: [{
			  label: 'Population', // Name the series
			  fill: true,
			  lineTension: 0.1, //برای منحنی کردن شکستگی ها
			  borderColor: 'rgba(75,75,192,0.9)', // Add custom color border
			  borderCapStyle:'butt',
			  borderDash:[],
			  borderDashOffset:0.0,
			  borderJoinStyle:'miter',
			  pointBorderColor:'rgba(75,72,192,1)',
			  pointBackgroundColor: '#fff',
			  pointBorderWidth: 5,
			  pointHoverRadius: 5,
			  pointHoverBackgroundColor: 'rgba(75,72,192,1)',
			  pointHoverBorderColor: 'rgba(220,220,220,1)',
			  pointHoverBorderWidth: 2,
			  pointRadius: 1,
			  pointHitRadius: 10,
			  backgroundColor: 'rgba(75,75,192,0.4)', // Add custom color background (Points and Fill)
			  data: [5,59,80,81,16,55,40,50], // Specify the data values array
        }]
    },
    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: {
            position: "bottom"
        },
		showLines: true, //حذف خطوط چارت
        scales: {
            yAxes: [{
			
				display: true,
				//type: 'linear',
				position: "left",
					
				scaleLabel: {
					display: true,
					labelString: 'درصد',
					fontSize: 16,
					fontColor: "red",							
				},
			
			
                ticks: {
					reverse:false,
                    fontColor: "rgba(0,0,0,0.5)",
                    fontStyle: "bold",
                    beginAtZero: true,
                    maxTicksLimit: 30,
                    padding: 20
					
                },
                gridLines: {
                    drawTicks: true,
                    display: true,
                }

            }],
            xAxes: [{
				
				display: true,
				//type: 'linear',
				position: "left",
					
				scaleLabel: {
					display: true,
					labelString: 'ماه های سال',
					fontSize: 16,
					fontColor: "red",							
				},
	
                gridLines: {
                    //zeroLineColor: "transparent"
                },
                ticks: {
                    padding: 20,
                    fontColor: "rgba(0,0,0,0.5)",
                    fontStyle: "bold",
				    beginAtZero: true,
                    maxTicksLimit: 15,
                    padding: 20
                }
            }]
        }
    }
});
  • در خط  چهارم مدت زمان لود شد نمودار را ۱ ثانیه تنظیم کردیم تا افکت جالبی را ایجاد کند.
  • در خط های ۷ تا ۳۲ اطلاعات ورودی برای ساخت نمودار تنظیم شده است. دز خط ۱۰ لیبل های محور افقی و در خط ۳۰ ام دیتای محور عمودی داده شده است. همانطور که قبلا گفته شد این نمودار با نمودار پراکندگی X-Y متفاوت است.
  • همچنین در بین خطوط ۷ تا ۳۲ تنظیمات Style خط نمودار را مشاهده می کنید که با کمی دقت می توانید آن را به دلخواه خود تغییر دهید.
  • خط ۳۵ و ۳۶ تنظیمات رسپانسیو نمودن نمودار است.
  • در کروشته options تنظیمات محور افقی و عمودی و همچنین پس زمینه نمودار و لیبل آنها است.
  • برای مثال در خط ۴۶ می توانید مشخص کنید تنها نقاط در نمودار نمایش داده شود.

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

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *