使用chart.js在任意位置实现具有50个点的雷达图的最有效方法是什么 [英] What's the most effective way to implement a radar plot with 50 points at arbitrary locations using chart.js

问题描述

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

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

我想在径向缩放的图上显示这些数据(即圆形带表示每个点的值有多高)以显示角度与值.对于每个数据集，角度会发生很小但无法控制的变化，但始终会有大约 50 个角度在图表周围相当均匀地分布.

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

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

有没有办法将两者结合起来，或者我错过的某个选项来控制它们以达到我在这里寻找的结果?

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

解决方案

Demo &代码:

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

解释:

1. 使用 scatter 图表绘制点
2. 添加(编写)了一个 chartjs 插件，它可以从beforeUpdate 上的极坐标到笛卡尔坐标，因此您不必担心每次更新前的转换
3. Made x &y 网格(不是通过原点的轴)通过添加 <代码>gridLines: { color: 'transparent' } 和 ticks: { display: false }
4. 使两个轴的 min 和 max(ticks 中的选项)相等，以使原点位于中心
5. 添加了 radialLinear 极坐标网格的比例

(更新 1)

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

(更新 2)

1. 添加(编写)了一个 beforeDraw 插件 用 OP 想要的浅蓝色填充 ctx

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

Consider a sequence of data along the following lines:

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

I'd like to display this data on a radially scaled plot (i.e. circular bands indicating how high the value of each point is) to show angle vs value. Angles will change by a small but uncontrollable quantity for each data set but there will always be ~50 of them spaced fairly evenly around the chart.

It looks like chart.js has two options which don't quite fit the bill:

• A Radar plot which appears to require a label per point but without an obvious way to control where those labels are applied.
• An x-y scatter which I could calculate x/y co-ordinates for but which doesn't have the radial scale to help visualise the value of each point.

Is there a way to combine the two perhaps or some option I've missed to control them to achieve the result I'm looking for here?

Edit - for example, this shows the data but lacks a radial scale:

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

**Edit2 - This is the sort of thing I Would expect to see as a result:

解决方案

Demo & Code :

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

Explanation:

1. Used a scatter chart to plot points
2. Added (wrote) a chartjs plugin that converts points from polar to cartesian on beforeUpdate so you don't have to worry about converting before every update
3. Made x & y grid (not axes through origin) hide by adding gridLines: { color: 'transparent' } and ticks: { display: false }
4. Made min and max (options in ticks) of both axes equal so that the orgin is at the center
5. Added a radialLinear scale for the polar grid

(Update 1)

6. Added a tooltip label callback to show tooltip as (r,θ) instead of default (x,y)

(Update 2)

7. Added (wrote) a beforeDraw plugin to fill the ctx with light blue color as the OP wanted

PS: (Pointing out just to be a little competitive) I have used chartjs (unlike other answers) because the OP wants a chartjs solution as it's clearly written in the question: "using chart.js". There might be solutions better than chartjs but that's irrelevant.

这篇关于使用chart.js在任意位置实现具有50个点的雷达图的最有效方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！