What's the most effective way to implement a radar plot with 50 points at arbitrary locations using chart.js

前端 未结 2 1596
清酒与你
清酒与你 2021-02-07 09:29

Consider a sequence of data along the following lines:

data = [{angle:1.2,value:1.2},...,{angle:355.2: value:5.6}];

I\'d like to display this d

2条回答
  •  清歌不尽
    2021-02-07 09:49

    You can use D3 js Charts is usefull for radar chart check the example link bellow :

    ////////////////////////////////////////////////////////////// 
            //////////////////////// Set-Up ////////////////////////////// 
            ////////////////////////////////////////////////////////////// 
    
            var margin = {top: 100, right: 100, bottom: 100, left: 100},
                width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
                height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);
    
            ////////////////////////////////////////////////////////////// 
            ////////////////////////// Data ////////////////////////////// 
            ////////////////////////////////////////////////////////////// 
    
            var data = [
                      [//Yourchart values
                        {axis:"",value:0.052},
                        {axis:"",value:0.052},
                        {axis:"",value:0.012},
                        {axis:"",value:0.012},
                        {axis:"",value:0.022},
                        {axis:"",value:0.052},
                        {axis:"",value:0.052},
                        {axis:"",value:0.021}           
                      ]
                    ];
            ////////////////////////////////////////////////////////////// 
            //////////////////// Draw the Chart ////////////////////////// 
            ////////////////////////////////////////////////////////////// 
    
            var color = d3.scale.ordinal()
                .range(["#6cbb69","#CC333F","#00A0B0"]);
    
            var radarChartOptions = {
              w: 500,
              h: 300,
    
              maxValue: 0.15,
              levels: 5,
              roundStrokes: true,
              color: color
            };
            //Call function to draw the Radar chart
            RadarChart(".radarChart", data, radarChartOptions);
    

    https://codepen.io/Nighamza/pen/bKmjGE

提交回复
热议问题