常用可视化图形介绍

Fusionchart图形

zome Line chart使用滚动条和zoom显示大量数据:Zoom: 实现对某一段的放大,pin: 拖动滚动条时,该段在屏幕上,用于和其他段的比较

column 3D 真正的可交互的3d图形

Combination Single Y或者Dual Y. 实现X轴相同Y相同或不同内容的关联组合。

horizontal bar chart用于显示 x轴标签比较长的;

plot chart用于表示落在某个区域的数目(如连接数),可以用颜色和形状表示(x,y,m,n)四元组;

bubble chart用于表示x和y对应的数值(如流量),可以用颜色和形状表示(x,y,m,n)四元组。

pareto显示2/8比例;

TreeMap图形或者叫Marimekko Chart 用于显示属性关系,类似于ip+port流量比较合适。

Link chart: 使用弹出对话框,实现drill down 效果,应该只需要传入数据即可

FusionWidgets图形

Realtime 图形实现实时数据查看和基于时间的对比

Gauge图形和Thermometer Chart:分级别的展示,如脆弱度或告警。有Horizontal Linear Gauge类似于水平温度计。Cylinder Gauge类似于容器。LED Gauge类似于指示器

Gantt图:表示计划

Spark Chart: word-sized图形,可以写在表格中,哈哈。

PowerChart图形

Candlestick: 用于显示方差,平均值等,参考可视化

Drag Node Chart:用来构建流程图,层次结构和网络图

Select Scatter Chart:支持对Scatter图形的框型选择,并得到选择的item

Inverse Axis Chart:Y轴是离散数据的图形

Logarithmic Chart:表示Y轴刻度为非连续变化

Radar Chart:用于比较不同产品在某些条件下的情况,用于产品选型。compare multiple entities based on different characteristics.

Multi-Axis Line Chart:用于多个参数的比较,多用于自变量相同,如都是时间的比较

Multi-Level Pie Chart:多个饼图的组合,用于相关的百分比查看

Twaver图形

用于网管方面,图形专用性比较强

http://www.servasoftware.com/twaver.php?p_id=118

java demo的Monitor Property Demo

实时显示单个主机的详细链接情况,当流量变化时改变链接的颜色

Flex demo 的AutoLayoutDemo和Spring Layout demo

显示大量主机的实时情况

Ilog实现的图形

参考:http://www.ibm.com/developerworks/websphere/zones/visualization/demos/elixir.html

TreeMap图:用于同时表现大量数据,使用面积和颜色标识。可以实现drill down效果

Business process modeler 可用来构造流程图

Network monitor 的实现

BPM Monitor:实现flow的流程,并可显示当前所在阶段

Calendar:类似于手机的日程管理

3D CHART 支持line area column bar pie 种类,实现交互,旋转,放大效果,这个应该算支持最全了吧

TimeLine:showing a linear sequence of events, arranged around an interactive horizontal time line

Gauge:支持circular, rectangular两种形状、Category,Multi-Layer linear,linear三种数据;Indicator图形

Organization Chart 实现层次结构显示,如组织结构图

图形实例

Marimekko Chart

clip_image002

多个图形的集合

clip_image004

Marimekko Chart

clip_image006

Gauge图:仪表盘

clip_image008

Clinder Gauge

clip_image010

Phyrimid:饼图的替代

clip_image012

Fusion map:密度图的实现

clip_image014

图形颜色很好

clip_image016

可选择的Scatter 图形

clip_image018

Realtime图形

clip_image020

Interative:(标尺和高斯图)

clip_image022

可交互,可旋转的3D图形

前后使用不同的图形样式,如:line, bar ,area

clip_image024

clip_image026

Dual Y Chart

clip_image028

将相关数据放到一个图上,可以有两个两个Y轴,分别位于左右

Drill down chart的实现:

Fusionchart中的linkchart

Flex对itemClick事件进行监听

Legend事件响应

Fusionchart 支持,flex可能也支持

展开阅读全文

没有更多推荐了,返回首页