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

رسم نمودار خطی با 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 و معرفی تنظیمات آن

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

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
                }
            }]
        }
    }
});

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