雷达图

某厂面试归来，发现自己落伍了！>>> 支持定义任意多个属性值，简单好用！文章底部获取完整代码！ 如何使用 新建一个节点 为节点添加 graphics 组件 添加用户脚本 radar 调整对应参数 实现原理 需求可以转化成如何画一个有特点的多边形。 先观察一下，雷达图的每个属性有什么特点。 可以看到每个属性值，都是在固定虚线上移动。 而且每条线的夹角都是一样的。这个夹角就是 360度 除以 总共属性数量 。 const radians_per = Math.PI * 2 / this.side_count; 所以我们可以按照属性次序确定与 x轴 的夹角。如果我们把第一个属性值放在 y轴 ，那么初始角度为 90 。 // 初始边放在y轴，多90度 const radians = side_i * radians_per + Math.PI / 2; 虚线的长度可以由总长度和需要的百分比求出。 const side_length = this.side_max_length * percent; 接着根据极坐标到直角坐标系的转换，就能求出该属性的坐标。 // 坐标计算 x = r * cos y = r * sin const posX = side_length * Math.cos(radians); const posY = side_length * Math.sin

“数据可视化”可以帮助用户理解数据，一直是热门方向。 图表是”数据可视化”的常用手段，其中又以基本图表—-柱状图、折线图、饼图等等—-最为常用。 用户非常熟悉这些图表，但如果被问道，它们的特点是什么，最适用怎样的场合（数据集）？恐怕答得上来的人就不多了。 本文是电子书《 Data Visualization with JavaScript 》第一章的笔记，总结了六种基本图表的特点和适用场合，非常好地回答了上面的问题。 序言 进入正题之前，先纠正一种误解。 有人觉得，基本图表太简单、太原始，不高端，不大气，因此追求更复杂的图表。但是，越简单的图表，越容易理解，而快速易懂地理解数据，不正是”数据可视化”的最重要目的和最高追求吗？ 所以，请不要小看这些基本图表。因为用户最熟悉它们，所以只要是适用的场合，就应该考虑优先使用。 一、柱状图（Bar Chart） 柱状图是最常见的图表，也最容易解读。 它的适用场合是二维数据集（每个数据点包括两个值x和y），但只有一个维度需要比较。年销售额就是二维数据，”年份”和”销售额”就是它的两个维度，但只需要比较”销售额”这一个维度。 柱状图利用柱子的高度，反映数据的差异。肉眼对高度差异很敏感，辨识效果非常好。柱状图的局限在于只适用中小规模的数据集。 通常来说，柱状图的X轴是时间维，用户习惯性认为存在时间趋势。如果遇到X轴不是时间维的情况

option = { title: { text: '社区服务评分' }, tooltip: {}, backgroundColor: '#081A40', legend: { textStyle:{color:'#FEFEFF', fontSize:'18'}, data: ['街道a','街道b','街道c','街道d'] }, radar: { shape: 'circle', backgroundColor: '#081A40', name: { textStyle: { color: '#fff', fontSize:20, backgroundColor: '#081A40', borderRadius: 15, padding: [3,4,2, 5] } }, indicator: [ { name: '劳动保障', max: 5}, { name: '民政', max: 5}, { name: '环卫', max: 5}, { name: '卫生', max: 5}, { name: '综治', max: 5} , { name: '计生', max: 5} , { name: '医保', max: 5} , { name: '党建', max: 5} , { name: '武装', max: 5} , { name: '老年大学', max: 5} ] },

从零开始写一个武侠冒险游戏-6-用GPU提升性能(3) --解决因绘制雷达图导致的帧速下降问题 概述 现在轮到用 mesh 改写那个给性能带来巨大影响的状态类了, 分析一下不难发现主要是那个实时绘制并且不停旋转的雷达图拖累了帧速, 那么我们就先从雷达图入手. 开始我感觉这个雷达图改写起来会比较复杂, 因为毕竟在状态类的代码中, 雷达图就占据了一多半, 而且又有实时绘制, 又要旋转, 想想都觉得麻烦, 所以就把它放到最后面来实现. 不过现在正式开始考虑时, 才发现, 其实想多了, 而且又犯了个特别容易犯的毛病: 一次性考虑所有的问题, 于是问题自然就变复杂了, 那么我们继续遵循最初的原型开发原则, 先提取核心需求, 从简单入手, 一步一步来, 一次只考虑一个问题, 这样把整个问题分解开发就发现其实也没多难. 用 mesh 改写状态类 整体思路 改写工作的核心就是先画个大六边形作为雷达图的背景, 再根据角色的 6 个属性值画一个小多边形(可能会凹进去), 最后让它旋转, 其中涉及的实时计算全部放到 shader 中. 还有要做的就是在六边形顶点处显示属性名称, 最后把状态栏也用 mesh 绘制出来. 改写雷达图 具体来说就是两部分工作: 绘制雷达图背景:大六边形 绘制技能线:小多边形 我们前面也用过 mesh 绘图, 使用了函数 addRect() , 因为我们当时绘制的是一个方形区域

文章目录 1.基本构造 2.比较功能 1.基本构造 之前在一些数据分析案例中看到用 Go 语言绘制的雷达图，非常的漂亮，就想着用matlibplot.pyplot也照着画一个，遗憾的是matlibplot.pyplot模块中没有直接绘制雷达图的函数，不过可以基于‘polar’图形特征来改进，下面就记录一下如何绘制雷达图。 import numpy as np import matplotlib . pyplot as plt # 用于正常显示中文 plt . rcParams [ 'font.sans-serif' ] = 'SimHei' #用于正常显示符号 plt . rcParams [ 'axes.unicode_minus' ] = False # 使用ggplot的绘图风格，这个类似于美化了，可以通过plt.style.available查看可选值，你会发现其它的风格真的丑。。。 plt . style . use ( 'ggplot' ) # 构造数据 values = [ 2.6 , 2.1 , 3.4 , 3 , 4.1 ] feature = [ '个人能力' , 'QC知识' , '解决问题能力' , '服务质量意识' , '团队精神' ] # 设置每个数据点的显示位置，在雷达图上用角度表示 angles = np . linspace ( 0 , 2 *

说明 搞了一个最新版本的雷达图，比以前那个美观。 不多说，代码奉上： 完整代码 ''' matplotlib雷达图 ''' import numpy as np import matplotlib.pyplot as plt # 雷达图 def plot_radar(labels, data, score): ''' 用法： >>> labels = np.array(['艺术A','调研I','实际R','常规C','企业E','社会S']) #标签 >>> data = np.array([1,4,3,6,4,8]) # 数据 >>> score = 10 # 表明数据是“十分制”。其可选的选项有1分制、5分制、10分制、100分制 >>> plot_radar(labels, data, score) # 画雷达图 ''' n = len(labels) # 转化为十分制！！！ if score in [5, 10, 100]: data = data * 10/score elif score == 1: data = data * 10 angles = np.linspace(0 + np.pi/2, 2*np.pi + np.pi/2, n, endpoint=False) # 旋转90度，从正上方开始！ data = np.concatenate((data,

微波是指波长在1mm-1m（即频率在300MHz-300GHz）电磁波，包括毫米波、厘米波、分米波、它比可见光-近红外的波长大得多。 微波遥感用的是无线电技术，而可见红光-近红外遥感用的是光学技术，通过摄影或扫描获取信息。 微波遥感有主动和被动之分。主动遥感就是人工发射探测源，而被动遥感就是利用地物自身发射或者反射的微弱电磁波，进而实现对地物的探测。 微波遥感的优势 ： 1.微波遥感具有全天时、全天候的的工作能力。雷达遥感不依赖于太阳光，而利用自身发射的电磁波，因此可以昼夜全天时工作；微波对大气衰减小，能在任何气候条件下全天候工作。 2.微波具有很强的穿透能力。不仅能够穿云破雾，而且能够穿透一定厚度植被、土壤、冰雪等，提供部分地表以下的信息。 3.主动微波遥感(SAR)记录电磁波的后向散射强度(振幅)、极化、相位(是干涉测量的基础)三方面的信息。 4.对地表粗超度、地物几何形状、介电性质(土壤水分)敏感。 5.可获得多波段、多极化、多角度的散射特征。 6.主动微波遥感(SAR)可用于精确定位、测距；且不依赖于距离，获得高空间分辨率的数据。 角反射器效应：若表面由两个或者三个相互垂直的镜状反射面组成. 微波在上述情况下可以产生多次散射，增强后向散射能量。 两个角反射使雷达图像上出现相应于两平面交线的一条亮线；而三面角反射使雷达图像上出现一个相应与三个面交点的亮点。 散射截面

效果图： 具体实现 public class RadarView extends View { private static final float maxValue = 100; // 最大刻度值 private int count = 5; // 数据个数 private float angle = (float) (Math.PI * 2 / count); private Paint circlePaint; // 圆环画笔 private float radius; // 最大半径 private int centerX, centerY; // 中心点 private Paint mainCirclePaint; // 整个圆环填充画笔 private Paint graduationValuePaint; // 刻度值画笔 private String[] graduationValues = {"0", "20", "40", "60", "80", "100"}; private Paint titlePaint; // 标签画笔 private String[] titles = {"标签a", "标签b", "标签c", "标签d", "标签f"}; private double[] data = {70, 50, 67, 80, 56}; private

最近再做eact-cesium项目来预警了在地图上其经纬度闪烁，找了好久才找到方法（当然是别人封装的）。 效果图 /** *圆形扩大扫描圈 * */ function AddCircleScanPostStage(viewer, cartographicCenter, maxRadius, scanColor, duration) { var ScanSegmentShader = "uniform sampler2D colorTexture;\n" + "uniform sampler2D depthTexture;\n" + "varying vec2 v_textureCoordinates;\n" + "uniform vec4 u_scanCenterEC;\n" + "uniform vec3 u_scanPlaneNormalEC;\n" + "uniform float u_radius;\n" + "uniform vec4 u_scanColor;\n" + "vec4 toEye(in vec2 uv, in float depth)\n" + " {\n" + " vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\n" + " vec4 posInCamera =czm

onImageClick(e){ let lables = this.props.image_label; if(e.componentType==='radar'&& e.name.length>0){ //点击 雷达图的 名称label　　　　　　let label = e.name }else { //点击雷达图的坐标 let index = e.event.topTarget.__dimIdx; if(index!=undefined){　　　　　　　//通过 indicator 获取lable let label = this.props.image_radar.radar.indicator[index].text; } }}注意： 想使用富文本rich,一定要渲染成 canvas ,svg 不好用 <ReactEcharts opts={{renderer: 'svg'}} lazyUpdate={true} notMerge={true} onEvents={{ 'click':props.onImageClick }} opts={{renderer: 'canvas'}} option={image_radar} style={{height: '220px', width: '100%', margin: 'auto'}}/> radar:{　　 name: