本文的话题是：性能，HTML5、JS、Qunee组件的性能和效率问题 历史回顾 以往提到Javascript，联想到的是缓慢的、容易出错的小东西，一种脚本语言，现在浏览器的发展，js引擎的优化，js已经今非昔比，无论在浏览器端还是服务器端，都有一席之地，结合HTML5开发企业级应用变得切合实际，以往要在浏览器中实现丰富的图形效果，通常会选择flex富客服端解决方案，也有些Web2.0时代的组件，比如Extjs，以及各种图表组件，但性能上并不理想，随着HTML5的普及，Web组件有了新的思路，抛弃老IE浏览器，了却后顾之忧，实现真正的高性能，这一点Qunee图形组件已经将Flex远远抛到脑后，实现上万图元，流畅操作 静态拓扑图性能 首 …
阅读更多有客户提到网络监控需求，需要展示服务器状态，告警，以及监控信息，比如CPU，内存，宽带状态，使用柱状图展示，Qunee目前并不提供这些图表，需要些扩展代码来实现，尝试了一下，发现还是挺容易的 柱状图信息展示 首先来看CPU柱状图，扩展了一个UI组件，实现了绘制和测量方法，非常简单，绘制代码中取#data属性作为百分比，并根据数值获取红黄绿不同颜色，此外还有文字位置的细节代码 创建BarUI function BarUI(data) { Q.doSuperConstructor(this, BarUI, arguments); } BarUI.prototype = { width: 100, height: 20, measure: …
阅读更多客户提到设备面板的需求，qunee并没有Equipment这样的图元，但借助父子关系和跟随关系设置，可以实现类似功能，并完成下面的例子 示例代码 代码非常简单，这里直接列出 var graph; function init(){ graph = new Q.Graph('canvas'); graph.originAtCenter = false; graph.translate(20, 20); var rack = createEquipment("", 4, 1, "images/shelf.jpg"); var card1 = …
阅读更多HTML第三方组件种类繁多，小到按钮，工具栏，大到树图，表格，布局框架，以及各种图表，每种组件都有其优势，比如EasyUI的树和表格，Bootstrap的表单，Qunee的拓扑图等，一个应用需要整合多种组件，本文将以一个示例来介绍EasyUI与Qunee组件的同步使用 引入相关js和css文件 本例用到jquery, bootstrap, easyui和qunee，分别引入相关文件 <script type="text/javascript" src="http://demo.qunee.com/js/jquery/jquery.min.js"></script> …
阅读更多Qunee for HTML5 v1.3 已发布，增加总线型布局，提供文本图元，增强了编辑功能，欢迎联系升级 在线演示：http://demo.qunee.com v1.3更新内容 鱼骨型总线 可设定连线走向，实现不同的总线型效果 Q.Text图元类型 提供大小调整和对齐方式功能，实现更丰富的文字呈现效果 编辑功能 节点大小调整与旋转 多行文字编辑 路径编辑 拖拽创建节点、连线 其他功能 打印预览 左上角为原点的坐标系支持
阅读更多总线型拓扑图
总线布局是拓扑图中的一种典型结构，总线（Bus），是计算机各种功能部件之间传送信息的公共通信干线，总线和与之连接的设备一起组成一种拓扑结构，这种图称为总线型拓扑图 总线拓扑图示例 Qunee中定义了Bus类型图元，可以通过路径描述一条总线，与总线相连的节点连线，成正交线性布局 示例 var graph = new Q.Graph(canvas); graph.zoomToOverview(); var idIndex = 0; function createNodeLinkToBus(bus, x, y, angle){ var node = graph.createNode("-" + idIndex, x, …
阅读更多Qunee for HTML5 v1.2版本正式发布了，此次更新增加了染色、分组图元、导出预览等重要新功能，增加了四个示例，敬请升级，在线演示：http://demo.qunee.com, 官方网站：http://qunee.com Qunee for HTML5是一套基于HTML5的拓扑图图组件 使用HTML5 Canvas技术，绘制清新、流畅的网络图，可用于社交网络图、拓扑图、流程图、地图等需求， JS组件封装，藏繁琐于简洁，轻松构建优雅的互联网应用与企业应用，让数据的在线可视化变得容易 v1.2更新 增加Q.Group图元 改进连线样式 增加图片颜色渲染，支持多种混合模式 画布导出预览，支持指定范围和缩放比例输出
阅读更多基于HTML5的网络拓扑图(1)
什么是网络拓扑 网络拓扑，指构成网络的成员间特定的排列方式。分为物理的，即真实的、或者逻辑的，即虚拟的两种。如果两个网络的连接结构相同，我们就説它们的网络拓扑相同，尽管它们各自内部的物理接线、节点间距离可能会有不同。 - 维基百科 网络拓扑图的绘制 很多人用visio绘制网络拓扑图，非常精美，但只能静态示意，也有些传统的拓扑图中间件，基于Java、flex或者Silverlight技术，能够动态显示，只是界面略显沉重，于是有人尝试纯Web技术的图形组件，其中有不少佼佼者如：mxgraph, yfiles…… 都是老外开发的产品，类库巨大，售价昂贵，技术支持是个问题，那么有没有一种轻巧、干净、国产的 …
阅读更多