Javascript 什么'；这是使用chart.js在任意位置绘制50个点的雷达图的最有效方法

考虑沿着以下线路的一系列数据：

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

我想在径向缩放图上显示这些数据（即圆形带，指示每个点的值有多高），以显示角度与值。每个数据集的角度都会发生微小但不可控的变化，但在图表上始终会有约50个角度均匀分布

看起来

chart.js

有两个不太合适的选项：

• 一种雷达图，似乎要求每个点都有一个标签，但没有明显的方法来控制这些标签的应用位置
• 一个x-y散射，我可以计算x/y坐标，但没有径向比例来帮助可视化每个点的值

有没有一种方法可以将这两者结合起来，或者我错过了一些控制它们的选择，从而实现我在这里所期待的结果

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

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

---

您可以使用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);

演示和代码：

说明：

使用图表绘制点

添加（编写）了一个chartjs，可在更新前将点从极坐标转换为笛卡尔坐标，这样您就不必担心每次更新前的转换

通过添加

：{color:'transparent'}

和

：{display:false}

使两个轴的

min

和

max

（勾号中的选项）相等，以便原点位于中心

添加了极轴栅格的比例

（更新1）

添加了一个将工具提示显示为（r，θ）而不是默认值（x，y）

（更新2）

在绘制之前添加（写入）一个

，以按照OP的要求用浅蓝色填充
ctx

---

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

你能给出一个你期望的图表类型的示例图像吗？谢谢你的帮助。你能帮我回答以下问题吗？我参考了你的例子。1) 2) 3)