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

发表于 & 归档在 HTML5, JavaScript, Web.

本文的话题是:性能,HTML5、JS、Qunee组件的性能和效率问题

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

Qunee拓扑图加载时间报表

Swift语法介绍

发表于 & 归档在 翻译.

2014.6.3日,苹果公布最新编程语言Swift,Swift是一种新的编程语言,用于iOS和OS X应用的开发,没有C的兼容性限制,Swift采用安全的编程模式,增加了现代功能,使编程变得容易,更灵活,更有趣,Swift的重新设计,依靠成熟和备受喜爱的Cocoa, Cocoa Touch 框架,是重新构想软件如何开发的机会。

swift
以下为语法介绍

原文:A Swift Tour

传统建议新语言的第一个程序是打印“Hello world”,对于Swift是下面的一行代码

println("Hello, world")

如果你用C或者Objective-C编写过代码,这段句法会感觉熟悉,在Swift中,这是一行完整的代码,不需要引入单独的库比如输入输出或者字符串操作,在全局作用域下编写的代码会作为程序的入口,所以你也不需要main函数,你同样不需要在每段代码后面写分号

这次tour将教你使用Swift编程的足够信息,完成各种编程任务,如果你有不理解也不用担心,本次演示的任何内容在后面的章节中都有详细的介绍

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

RequireJS与SeaJS模块化加载

发表于 & 归档在 HTML, JavaScript, Web.

web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有Package的Javascript语言变得难以管理,于是出现CommonJS项目,提出了一些规范模块化的写法,在Nodejs中普遍应用,同样浏览器端也出现了类似的解决方案,并结合浏览器异步加载的特性,有RequireJS提出的AMD(Asynchronous Module Definition)规范,以及SeaJS提出的CMD(Common Module Definition)规范,两者都实现Javascript了模块化定义的APIs,各有异同,下面将分别使用两种方案,实现Qunee组件的模块化加载
目录结构
模块目录结构

HTML5绘制设备面板

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

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

设备面板