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

Question

考虑以下几行的数据序列：

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

我想在径向比例图上显示此数据（即表示每个点的值有多高的圆形带）以显示角度与值。每个数据集的角度都会发生微小但无法控制的变化，但在图表周围总会有大约 50 个角度相当均匀地分布。

看起来 chart.js 有两个选项不太符合要求：

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

有没有办法将这两者结合起来，或者我错过的一些选项来控制它们以实现我在这里寻找的结果？

编辑 - 例如，这显示数据但缺少径向刻度：

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

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

Answer 1

您可以使用 D3 js Charts 对于雷达图很有用，请查看下面的示例 link：

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

Answer 2

演示和代码：

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

解释：

使用 scatter 图表绘制点
添加（编写）了一个 chartjs plugin，它在 beforeUpdate 上将点从极坐标转换为笛卡尔坐标，因此您不必担心在每次更新之前进行转换
通过添加 gridLines: { color: 'transparent' } and ticks: { display: false }
使两个轴的 min 和 max（ticks 中的选项）相等，以便原点位于中心
为极坐标网格添加了 radialLinear 比例尺

（更新 1）

添加了 tooltip label callback 以将工具提示显示为 (r,θ) 而不是默认的 (x,y)

（更新 2）

添加（编写）beforeDraw plugin 以根据 OP

ctx

PS：（指出只是为了有点竞争力）我使用了 chartjs（与其他答案不同）因为 OP 想要一个 chartjs 解决方案，因为它在问题中明确写了："using chart.js" .可能有比 chartjs 更好的解决方案，但这无关紧要。

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

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

javascript

radar-chart

chart.js

演示和代码：

解释：