当前位置: 首页 > Web前端 > HTML5

雷达图的实现!科科斯创造者!

时间:2023-04-05 01:19:14 HTML5

支持定义任意数量的属性值,简单易用!获取文章底部的完整代码!如何使用新节点在节点中添加图形组件添加用户脚本雷达调整相应参数实现原理需求可以转化为如何绘制具有特征的多边形。先观察一下,雷达图的各个属性有什么特点。您可以看到每个属性值都在一条固定的虚线上移动。且每条线的夹角相同。这个夹角是360度除以属性总数。constradians_per=Math.PI*2/this.side_count;所以我们可以根据属性的顺序来确定与x轴的夹角。如果我们把第一个属性值放在y轴上,初始角度就是90。//初始边放在y轴上,90多度constradians=side_i*radians_per+Math.PI/2;虚线的长度可以根据总长度和所需的百分比计算得出。constside_length=this.side_max_length*百分比;然后根据极坐标到直角坐标的变换,就可以得到该属性的坐标。//坐标计算x=r*cosy=r*sinconstposX=side_length*Math.cos(radians);constposY=side_length*Math.sin(弧度);最后把所有的点连接起来就完成了雷达图的绘制。完整的绘图代码如下。this.graphics.clear();//每个夹角constradians_per=Math.PI*2/this.side_count;for(letside_i=0;side_i