رسم نمودار خطی با 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 } }] } } });
- در خط چهارم مدت زمان لود شد نمودار را 1 ثانیه تنظیم کردیم تا افکت جالبی را ایجاد کند.
- در خط های 7 تا 32 اطلاعات ورودی برای ساخت نمودار تنظیم شده است. دز خط 10 لیبل های محور افقی و در خط 30 ام دیتای محور عمودی داده شده است. همانطور که قبلا گفته شد این نمودار با نمودار پراکندگی X-Y متفاوت است.
- همچنین در بین خطوط 7 تا 32 تنظیمات Style خط نمودار را مشاهده می کنید که با کمی دقت می توانید آن را به دلخواه خود تغییر دهید.
- خط 35 و 36 تنظیمات رسپانسیو نمودن نمودار است.
- در کروشته options تنظیمات محور افقی و عمودی و همچنین پس زمینه نمودار و لیبل آنها است.
- برای مثال در خط 46 می توانید مشخص کنید تنها نقاط در نمودار نمایش داده شود.
از این که ما را در مقاله رسم نمودار خطی با Chart.js همراهی کردید از شما سپاس گذاریم.
مقاله پیشنهادی :