使用chart.js在任意位置实施50点雷达图的最有效方法是什么？

Question

考虑以下几行数据:

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

我想在径向比例图(即表示每个点的值有多高的圆形带)上显示这些数据,以显示角度与值.对于每个数据集,角度将以小但不可控制的量改变,但是它们中总是有约50个在图表周围相当均匀地间隔开.

看起来chart.js有两个选项不太合适:

• 雷达图似乎需要每点标签,但没有明显的方法来控制这些标签的应用位置.
• 一个xy散射,我可以计算x/y坐标但是没有径向刻度来帮助可视化每个点的值.

有没有办法结合我错过的两个或许一些选项来控制它们以达到我在这里寻找的结果？

编辑 - 例如,这显示数据但缺少径向比例:

https://jsfiddle.net/7d7ghaxx/4/

**Edit2 - 这是我希望看到的结果:

Answer 1

演示和代码:

https://stackblitz.com/edit/js-jp4xm4?file=index.js

说明:

1. 使用散点图绘制点
2. 添加(编写)一个chartjs 插件,可以将点数从极点转换为笛卡尔点,beforeUpdate这样您就不必担心在每次更新之前进行转换
3. 制作x和y网格(不是通过原点的轴)通过添加和隐藏gridLines: { color: 'transparent' }ticks: { display: false }
4. 两个轴的制造min和max(选项ticks)相等,以便原点位于中心
5. 添加了radialLinear极坐标网格的比例

(更新1)

6. 添加了工具提示标签回调以将工具提示显示为(r,θ)而不是默认(x,y)

(更新2)

7. 添加(写入)beforeDraw 插件以填充ctx浅蓝色,如OP所需

PS :(指出有点竞争力)我使用过chartjs(与其他答案不同)因为OP想要一个chartjs解决方案,因为它清楚地写在问题中:"使用chart.js".可能有比chartjs更好的解决方案,但那是无关紧要的.

Answer 2

您可以使用D3 js图表对雷达图检查有用,示例链接如下:

////////////////////////////////////////////////////////////// 
        //////////////////////// 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