使用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}， ......，{角度：355.2：价值：5.6}]; 
  

我想在径向比例图上显示这些数据（即表示有多高的圆形带每个点的值是）显示角度与值。对于每个数据集，角度将以小但不可控制的数量改变，但是在图表周围总是有大约50个间隔相当均匀。

它看起来像 chart.js 有两个不太合适的选项：

• 雷达图似乎每个点都需要一个标签，但没有明显的方法来控制这些标签的应用位置。


• 我可以计算x / y坐标的xy散点但是它没有' t有径向刻度来帮助可视化每个点的值。

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

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

解决方案

Demo&代码：

https ：//stackblitz.com/edit/js-jp4xm4？file = index.js

说明：

1. 使用散布图表绘制积分


2. 添加（写）一个chartjs 插件，可以在 beforeUpdate 之前将点数从极点转换为笛卡尔值，因此您无需担心每次更新前的转换


3. Made x& y网格（不是通过原点的轴）通过添加 <隐藏code> gridLines ：{color：'transparent'} 和 ticks ： {display：false}


4. Made min 和 max （两个轴中的选项 ticks ）相等，以便orgin位于中心


5. 添加 radialLinear 极地网格

（更新1）

6. 添加了工具提示标签回调将工具提示显示为（r，θ）而不是默认（x，y）

（更新2）

7. 已添加（写了一个 beforeDraw 插件填写 ctx ，浅蓝色为OP想要

< PS：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屋！