有哪些雷达图的制作插件 可拖动echarts 节点拖动

拒绝访问 | www.excelpx.com | 百度云加速
请打开cookies.
此网站 (www.excelpx.com) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(3e33abb1b43b488f-ua98).
重新安装浏览器,或使用别的浏览器他的最新文章
他的热门文章
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)lingo动态生成雷达图
雷达图是一种形象的数据表现形式,最近用lingo实现了动态的生成雷达图
其中之一是雷达图上呈现几组数据,并且可以互动点击节点查看数据
还有一种是两个雷达图形的动态生长变化,可以比较形象的表现不同时期数据的对应变化:
&多边形背景,辐射线,标尺代码如下:
property pNumPoints, pRadius--数据数,半径
on getPropertyDescriptionList me
& list = [:]
& addProp list, #pRadius, [#comment:
&#format: #integer, #default: 200]
& addProp list, #pNumPoints,
[#comment:"数据类别数",\
&#format: #integer, #default: 5]
& return list
on beginSprite me
& mem = sprite(me.spriteNum).member
& -- how many degrees apart is each
& angleDiff = 360.0/pNumPoints
& -- build vertex list
& list = []
& listline=[]
& list2=[]
& list4=[]
& list6=[]
& list8=[]
& repeat with angle = 0 to pNumPoints
circlePoint(angle*angleDiff,pRadius)
& & add list, [#vertex:
& & add listline,
[#vertex:p]--各放射线点
listline,[#vertex:point(0,0)]--中心点
circlePoint(angle*angleDiff,pRadius*0.2)
& & add list2,[#vertex:
p2]--0.2刻度
circlePoint(angle*angleDiff,pRadius*0.4)
& & add list4,[#vertex:
p4]--0.4刻度
circlePoint(angle*angleDiff,pRadius*0.6)
& & add list6,[#vertex:
p6]--0.6刻度
circlePoint(angle*angleDiff,pRadius*0.8)
& & add list8,[#vertex:
p6]--0.8刻度
& end repeat
& -- set the member
& mem.vertexList = list
& member("LDline").vertexList =
& member("0.2area").vertexList = list2
& member("0.4area").vertexList = list4
& member("0.6area").vertexList = list6
& member("0.8area").vertexList = list8
onePointV=abs(list[1][1].locv)--第一点离中心点距离
sprite("biaochi").height=215*onePointV/200.0--数字刻度同步缩放
sprite("biaochi").width=26*onePointV/200.0
-- the following handler returns the point on any circle
-- given the angle and radius
on circlePoint angle, radius
& a = (float(angle-90)/360.0)*2.0*pi()
& x = cos(a)*radius
& y = sin(a)*radius
& return point(x,y)
雷达图代码如下:
property pNumPoints, pRadius,pDataList--数据数,半径,数据列表
Property listleida
on getPropertyDescriptionList me
& list = [:]
& addProp list, #pRadius, [#comment:
&#format: #integer, #default: 200]
& addProp list, #pDataList,
[#comment:"数据列表",\
&#format: #string, #default:
"[0.8,0.7,0.65,0.4,0.6]"]
& return list
on exitframe me
pointmouse=power(_mouse.mouseloc.locH-sprite(me.spritenum).locH,2)+power(_mouse.mouseloc.locV-sprite(me.spritenum).locV,2)
& pointmouse=power(pointmouse,0.5)
sprite(me.spritenum).hitTest(_mouse.mouseloc)=#normal then
& if pointmouse&=pRadius+10
pointmouse=_mouse.mouseloc-sprite(me.spritenum).loc
& & repeat with i=1 to
listleida.count-1
subpoint=pointmouse-listleida[i].vertex
abs(subpoint.loch)&=10 and
abs(subpoint.locv)&=10 then
& sprite("LDmouse").blend=100
sprite("LDmouse").loc=sprite(me.spriteNum).loc+listleida[i].vertex
& sprite("LDdata").blend=100
sprite("LDdata").member.text=string(pDataList[i]).char[1..4]
sprite("LDdata").loc=sprite("LDmouse").loc+point(15,-10)
& exit repeat
&sprite("LDmouse").blend=0
&sprite("LDdata").blend=0
& & end repeat
sprite("LDmouse").blend=0
sprite("LDdata").blend=0
& -- &end if
on beginSprite me
& sprite("LDmouse").blend=0
& sprite("LDdata").blend=0
& pDataList=value(pDataList)
& pNumPoints=pDataList.count
& mem = sprite(me.spriteNum).member
& -- how many degrees apart is each
& angleDiff = 360.0/pNumPoints
& -- build vertex list
& listleida=[]
& pDataList.append(pDataList[1])
& repeat with angle = 0 to pNumPoints
& & pleida =
circlePoint(angle*angleDiff,pRadius*pDataList[angle+1])
& & add listleida,
[#vertex:pleida]-- 雷达点
& end repeat
& -- set the member
& mem.vertexList = listleida
on circlePoint angle, radius
& a = (float(angle-90)/360.0)*2.0*pi()
& x = cos(a)*radius
& y = sin(a)*radius
& return point(x,y)
两种雷达图生长变化的代码如下:
property pNumPoints,
pRadius,pDataList1,pDataList2--数据数,半径,数据列表1,,数据列表2
Property listleida1,mem,listleida2
property currentframe--帧计数
on getPropertyDescriptionList me
& list = [:]
& addProp list, #pRadius, [#comment:
&#format: #integer, #default: 200]
& addProp list, #pDataList1,
[#comment:"数据列表1",\
&#format: #string, #default:
"[0.4,0.5,0.65,0.4,0.8]"]
& addProp list, #pDataList2,
[#comment:"数据列表2",\
&#format: #string, #default:
"[0.8,0.7,0.4,0.6,0.3]"]
& return list
on exitframe me
& if currentframe&5 and
currentframe&54 then&
& & Vl1=mem.vertexList
Vlsub=(listleida2-Vl1)*0.1
mem.vertexList=Vl1+Vlsub
& & if currentframe=54
mem.vertexList=listleida2
& & end if
& currentframe=currentframe+1
on beginSprite me
& currentframe=0
& pDataList1=value(pDataList1)
& pDataList2=value(pDataList2)
& pNumPoints=pDataList1.count
& mem = sprite(me.spriteNum).member
& -- how many degrees apart is each
& angleDiff = 360.0/pNumPoints
& -- build vertex list
& listleida1=[]
& listleida2=[]
& pDataList1.append(pDataList1[1])
& pDataList2.append(pDataList2[1])
& repeat with angle = 0 to pNumPoints
& & pleida1 =
circlePoint(angle*angleDiff,pRadius*pDataList1[angle+1])
& & add listleida1,
[#vertex:pleida1]-- 雷达点
& & pleida2 =
circlePoint(angle*angleDiff,pRadius*pDataList2[angle+1])
& & add listleida2,
[#vertex:pleida2]-- 雷达点
& end repeat
& -- set the member
& mem.vertexList = listleida1
on circlePoint angle, radius
& a = (float(angle-90)/360.0)*2.0*pi()
& x = cos(a)*radius
& y = sin(a)*radius
& return point(x,y)
已投稿到:
以上网友发言只代表其个人观点,不代表新浪网的观点或立场。是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。
6种图表类型
Chart.js帮你用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕上。
Chart.js基于HTML5 canvas技术,支持所有现代浏览器,并且针对IE7/8提供了降级替代方案。
简单、灵活
Chart.js不依赖任何外部工具库,轻量级(压缩之后仅有4.5k),并且提供了加载外部参数的方法。
曲线图(Line charts)
Line graphs are probably the most widely used graph for showing trends.
Chart.js has a ton of customisation features for line graphs, along with support for multiple datasets to be plotted on one chart.
柱状图(Bar charts)
Bar graphs are also great at showing trend data.
Chart.js supports bar charts with a load of custom styles and the ability to show multiple bars for each x value.
雷达图或蛛网图(Radar charts)
Radar charts are good for comparing a selection of different pieces of data.
Chart.js supports multiple data sets plotted on the same radar chart. It also supports all of the customisation and animation options you'd expect.
饼图(Pie charts)
Pie charts are great at comparing proportions within a single data set.
Chart.js shows animated pie charts with customisable colours, strokes, animation easing and effects.
极地区域图(Polar area charts)
Polar area charts are similar to pie charts, but the variable isn't the circumference of the segment, but the radius of it.
Chart.js delivers animated polar area charts with custom coloured segments, along with customisable scales and animation.
环形图(Doughnut charts)
Similar to pie charts, doughnut charts are great for showing proportional data.
Chart.js offers the same customisation options as for pie charts, but with a custom sized inner cutout to turn your pies into doughnuts.
Like what you see?
A project by
Chart.js由翻译整理他的最新文章
他的热门文章
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)

我要回帖

更多关于 html雷达图点可拖动 的文章

 

随机推荐