HTML5实现监控图

发表于 & 归档在 HTML5, JavaScript, 图形学, 拓扑图.

有客户提到网络监控需求,需要展示服务器状态,告警,以及监控信息,比如CPU,内存,宽带状态,使用柱状图展示,Qunee目前并不提供这些图表,需要些扩展代码来实现,尝试了一下,发现还是挺容易的

网络监控状态图

Qunee for HTML5 v1.4版本发布

发表于 & 归档在 HTML5, JavaScript.

Qunee for HTML5 v1.4正式发布,改善了交互功能,增强了自动布局功能,增加了相关文档,调整了示例代码,以及一些细节修改和增加,是一次重要更新,欢迎联系升级

气泡布局示例

自动布局是图的重要功能,有十几种常见布局算法,目前Qunee提供:TreeLayouter, SpringLayouter, BalloonLayouter,后期逐步完善
气泡自动布局 balloonlayouter

基于html5技术绘制上海地铁图 – 双车道路况信息

发表于 & 归档在 HTML, HTML5, 地图.

前面介绍了上海地铁图的绘制,最近有客户提出了新的需求:双车道,并显示路网状态信息。经过一番研究,在原地铁图基础上做了扩展实现
路况状态在GIS系统中广泛应用,谷歌地图,百度地图都有实时路况的功能,太复杂并非好事,就像地铁图,按真实经纬度呈现反而不够直观,交通图、路网也是如此,去掉无关信息,将有限的数据(路,收费站,路况)展现出来,成为一种解决方案
Screen Shot 2014-05-13 at 下午12.27.30

HTML5绘制设备面板

发表于 & 归档在 HTML5, 拓扑图.

客户提到设备面板的需求,qunee并没有Equipment这样的图元,但借助父子关系和跟随关系设置,可以实现类似功能,并完成下面的例子

设备面板

EasyUI + Qunee 组件同步示例

发表于 & 归档在 HTML, HTML5, JavaScript, 拓扑图, 案例.

HTML第三方组件种类繁多,小到按钮,工具栏,大到树图,表格,布局框架,以及各种图表,每种组件都有其优势,比如EasyUI的树和表格,Bootstrap的表单,Qunee的拓扑图等,一个应用需要整合多种组件,本文将以一个示例来介绍EasyUI与Qunee组件的同步使用

Qunee + EasyUI 同步示例

结合OpenLayers实现地图背景的拓扑图

发表于 & 归档在 HTML5, JavaScript, Map, 地图, 案例.

地图应用分三种级别:示意地图(Map Chart),地图(Map),地理信息系统(GIS),第一种通常使用相对坐标系,后两种则为真实的地理坐标,其中第二种以谷歌地图为代表,日常生活中普遍使用,后一种则为专业的GIS,专业领域做拓扑分析、流域分析时用到,示意地图我们已经有很多例子,比如美国大选示例中国地图示例等,今天介绍第二种地图的应用,结合OpenLayers和谷歌地图实现地图的拓扑图应用:demo.qunee.com/map/map.html

OpenLayers + Qunee

Qunee for HTML5 v1.3版本发布

发表于 & 归档在 HTML5, Web, 拓扑图.

Qunee for HTML5 v1.3 已发布,增加总线型布局,提供文本图元,增强了编辑功能,欢迎联系升级

在线演示:http://demo.qunee.com

v1.3更新内容

鱼骨型总线

可设定连线走向,实现不同的总线型效果

Q.Text图元类型

提供大小调整和对齐方式功能,实现更丰富的文字呈现效果

Q.Text图元类型