轻量高效的拓扑图组件
zh

Qunee for HTML5 v1.6新版本发布

2014-09-12

Qunee for HTML5 V1.6正式发布,修复了一些 BUG,增加了滚动条支持,改进了编辑器,增加了JSON 导入导出、告警冒泡、连线流动,UI 定制等扩展示例,欢迎访问并联系升级 导航面板 增加了滚动条导航模式,加上之前的导航按钮模式,以及去除导航面板的情况,出现了三种导航模式,并在Graph中提供了navigationType属性进行切换,以适用于不同的应用场景,默认使用滚动条模式 以下代码用于设置拓扑图使用导航按钮 graph.navigationType = Q.Consts.NAVIGATION_BUTTON; 滚动条模式 - Q.Consts.NAVIGATION_SCROLLBAR 滚动条模式符合传统的导航模 …

阅读更多

设备节点的信息展示

2014-09-04

电信网管系统中,设备的状态信息的实时展示非常重要,通常会以挂载一堆图标来展示状态或告警信息,图标展示的信息有限,有时需要更详细的面板或者图表,Qunee 中每个图元节点上可以挂载多个 UI 控件,支持9X9=81种相对位置,可以实现单节点上多个 ui 元素的排列和布局,另外每个 ui 元素都可以绑定图元属性,这使得信息可以实时更新,本文将结合最近客户提到的需求,使用 Qunee1.6 beta版本,实现在拓扑图中实现设备信息的显示 需求分析 网络设备拓扑图,默认设备为普通节点,双击时展开,显示CPU,内存,流量等信息,使用柱状图和不同颜色的文字来展示,再双击变回普通节点 这里需要定制节点,普通模式下,节点包含图标和文字,展开模式下, …

阅读更多

使用Leaflet创建地图拓扑图

2014-07-27

之前我们采用过Openlayers+Qunee的方案,实现地图拓扑图,鉴于Openlayers是一种古老项目,略显臃肿,面向更新的前端地图方案,在客户的介绍下,我们找到了leaflet - 基于HTML5的轻量地图客户端方案,结合Qunee使用,以及第三方插件,实现更加轻快的地图拓扑图应用 Leaflet介绍 leaflet是一个开源软件,作者在乌克兰,在移动设备上的有良好的体验,比较新和现代的地图客户端,类库压缩后只有33k,非常小巧,这一点让qunee都相形见绌,先看一个leaflet的入门示例 官方示例 // create a map in the "map" div, set the view to a …

阅读更多

Ionic创建移动版地铁图App

2014-07-23

Qunee有一个上海地铁图的例子,有客户希望转成mobile app,考察过android的webview,以及PhoneGap等多种Hybrid App方案后,最后选择使用ionic,准确的说是ionic + PhoneGap + Qunee ionic是一种基于HTML5创建Hybrid应用的前端框架,借助phoneGap + angularJS实现一套跨平台,轻量的移动UI方案,本文将介绍借助ionic实现移动版Qunee上海地图的示例 背景知识 安装ionic所需软件环境 - java, android sdk等 ionic实际上是集大成者,借助了多种技术,需要先安装好依赖的程序,比如nodejs, java, ADT, …

阅读更多

基于HTML5的云虚拟主机界面

2014-06-19

云计算大行其道,底层的虚拟化技术,上面的云存储和应用API,耳濡目染,也受益匪浅,算是大势所趋,回头看看Qunee组件,借这个趋势,可以在云计算可视化上发挥作用,最近就有客户用Qunee实现VPC配置图,并对交互做了定制,细节不便多说,本文主要介绍Qunee交互扩展方面的思路 参考示例 - visualops 云平台可视化这块儿国外做的不错,有不少开放的示例可以学习和参考,客户看中了这家云管理系统http://www.visualops.io/ ,这个系统使用的是SVG技术,体验了一下,效果不错 分析与实现 原型设计 从界面上看,一个云节点上有多个子网,每个子网内有多台虚拟主机,然后每个云节点有统一的路由Router管理(或者网 …

阅读更多

Qunee性能测试 - 十万图元拓扑图

2014-06-12

本文的话题是:性能,HTML5、JS、Qunee组件的性能和效率问题 历史回顾 以往提到Javascript,联想到的是缓慢的、容易出错的小东西,一种脚本语言,现在浏览器的发展,js引擎的优化,js已经今非昔比,无论在浏览器端还是服务器端,都有一席之地,结合HTML5开发企业级应用变得切合实际,以往要在浏览器中实现丰富的图形效果,通常会选择flex富客服端解决方案,也有些Web2.0时代的组件,比如Extjs,以及各种图表组件,但性能上并不理想,随着HTML5的普及,Web组件有了新的思路,抛弃老IE浏览器,了却后顾之忧,实现真正的高性能,这一点Qunee图形组件已经将Flex远远抛到脑后,实现上万图元,流畅操作 静态拓扑图性能 首 …

阅读更多

HTML5实现监控图

2014-05-28

有客户提到网络监控需求,需要展示服务器状态,告警,以及监控信息,比如CPU,内存,宽带状态,使用柱状图展示,Qunee目前并不提供这些图表,需要些扩展代码来实现,尝试了一下,发现还是挺容易的 柱状图信息展示 首先来看CPU柱状图,扩展了一个UI组件,实现了绘制和测量方法,非常简单,绘制代码中取#data属性作为百分比,并根据数值获取红黄绿不同颜色,此外还有文字位置的细节代码 创建BarUI function BarUI(data) { Q.doSuperConstructor(this, BarUI, arguments); } BarUI.prototype = { width: 100, height: 20, measure: …

阅读更多

Qunee for HTML5 v1.4版本发布

2014-05-16

Qunee for HTML5 v1.4正式发布,改善了交互功能,增强了自动布局功能,增加了相关文档,调整了示例代码,以及一些细节修改和增加,是一次重要更新,欢迎联系升级 在线演示:demo.qunee.com 升级申请:qunee.com/#try 气泡布局示例 自动布局是图的重要功能,有十几种常见布局算法,目前Qunee提供:TreeLayouter, SpringLayouter, BalloonLayouter,后期逐步完善 路况图示例 用于展示各个车道路况状态 设备面板示例 Qunee开发模式 在线示例列表 演示示例做了小幅修改,增加了在线示例列表,用于提供更多Qunee相关示例

阅读更多