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

考虑如下的数据序列：

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/ https://jsfiddle.net/7d7ghaxx/4/

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

演示和代码：

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

解释：

1. Used a scatter http://www.chartjs.org/docs/latest/charts/scatter.html图表绘制点
2. 添加（编写）了一个chartjsplugin http://www.chartjs.org/docs/latest/developers/plugins.html将点从极坐标转换为笛卡尔坐标beforeUpdate所以你不必担心每次更新前的转换
3. 通过添加隐藏 x 和 y 网格（不是通过原点的轴）gridLines http://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration: { color: 'transparent' } and ticks http://www.chartjs.org/docs/latest/axes/styling.html#tick-configuration: { display: false }
4. Made min and max（选项中ticks) 两个轴相等，因此原点位于中心
5. Added a radialLinear http://www.chartjs.org/docs/latest/axes/radial/linear.html极坐标网格的比例

（更新1）

6. Added a 工具提示标签回调 http://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback将工具提示显示为 (r,θ) 而不是默认的 (x,y)

（更新2）

7. 添加（写）了一个beforeDraw plugin http://www.chartjs.org/docs/latest/developers/plugins.html来填补ctxOP想要的浅蓝色

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