رسم نمودار رادار با Chart.js

رسم نمودار رادار با Chart.js

در ادامه مباحث پیشین برای رسم نمودار در این جلسه میخواهیم رسم نمودار رادار با Chart.js مورد بررسی قرار دهیم. نمودار راداری می تواند چند گروه را با هم مقایسه کند به طوری که هر گروه دارای محور مجزایی باشد. در حقیقت نمودار رادار برای داده چند متغیره استفاده می شود که از یک نقطه آغاز می گردند. این نمودار از پره هایی با زاویه یکسان تشکیل می گردد که هر پره یکی از متغیر ها را نمایش می دهد.

شروع کار با 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 و معرفی تنظیمات آن

در زیر یک نمونه مثال از نمودار رادار مشاهده می کنید و در ادامه به توضیحات تنظیمات آن خواهیم پرداخت.

        //Bar chart
        var ctx = document.getElementById('myChart').getContext('2d');  
        var myChart = new Chart(ctx, {
            type: 'radar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor:'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 0.9)',
                    borderWidth: 1
                }]
            },
            
    options: {  
    
        responsive: true, // Instruct chart js to respond nicely.
        maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height 
        
        title: {
            display: true,
            text: "35 Fastest times up Alpe d'Huez"
        },
        
        legend: {
            position: "bottom"
        },
        showLines: true, //حذف خطوط چارت
        scales: {
            yAxes: [{
            
                display: false,
                //type: 'linear',
                position: "left",
                    
                scaleLabel: {
                    display: true,
                    labelString: 'Rank',
                    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: false,
                //type: 'linear',
                position: "left",
                    
                scaleLabel: {
                    display: true,
                    labelString: 'Rank',
                    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
                }
            }]
        }
    }   

            
        });
        

  • در خط های 3 تا 15 تنظیمات اصلی ایجاد نمودار است.
  • در خط 7 لیبل های هر شعاع مقدار دهی شده است.
  • در خط 10 به ازای هر دسته (شعاع) مقدار دهی شده است.
  • در خط 43 متغیری به نام Options تعریف کردیم و تنظیمات Style نمودار از قیبل پس زمینه، واکنش گرا شدن و زنگ ها و لیبل های محور افقی و عمودی را مشخص کردیم. که با کمی دقت می توانید آن را به دلخواه خود تغییر دهید.

 

 

مقاله پیشنهادی :
5/5 - (1 امتیاز)

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

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