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

Question

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

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

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

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

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

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

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

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

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

Answer 1

演示和代码:

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

说明:

1. 使用了 scatter绘制点的图表
2. 添加(写)了一个 chartjs plugin在 beforeUpdate 上将点从极坐标转换为笛卡尔坐标，因此您不必担心在每次更新之前进行转换
3. 通过添加 gridLines 隐藏 x 和 y 网格(不是通过原点的轴) : { color: 'transparent' } 和 ticks : { 显示: false }
4. 使两个轴的 min 和 max(ticks 中的选项)相等，以便原点位于中心
5. 添加了 radialLinear极坐标网格的比例

(更新 1)

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

(更新 2)

1. 添加(写)了一个beforeDraw plugin根据 OP 的需要用浅蓝色填充 ctx

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