1、Qunee for HTML5（以下简称Qunee）是一套基于HTML5技术的图形组件产品，使用HTML5 Canvas技术，绘制清新、流畅的网络图，可用于社交网络图、拓扑图、流程图、地图等需求， JS组件封装，藏繁琐于简洁，轻松构建优雅的互联网应用与企业应用，让数据的在线可视化变得容易。
Qunee - 发音为“kjuːni”，寓意优雅轻巧
2、Qunee可用于拓扑图，流程图，组织图，机房平面图，组态软件的开发，具有轻量、高效、灵活扩展的特点，支持目前主流浏览器（Safari, Firefox, Chrome, IE9+），可运行在不同操作系统（Windows, Mac, Linux......）和移动终端（iOS，Android，Windows Phone......），借助PhoneGap之类的移动开发框架，可以开发移动应用程序。
Qunee提供Web图形解决方案：地图 - 地铁图、统计地图拓扑图 - 社交网络图、网络管理图其他 - 组织图、思维导图、流程图
Qunee组件的特点：
轻巧、高性能 - 支持上万图元，流畅操作矢量图形 - 支持矢量图形，无极缩放交互体验 - 漫游交互，改进交互事件、支持手持设备注重细节 - GIF动画，丰富渐变，层次控制等
3、Qunee主要提供Graph组件，Graph中可以加入不同类型的图元（Node, Edge, Group, ShapeNode, Text, Bus ...），图元可以配置不同的呈现样式，或者挂载或者添加不同的UI元素（LabelUI, ImageUI ...），通过组合和布局，实现丰富的呈现效果，满足多种应用场景：
地图 - 地铁图、统计地图
Qunee提供的丰富矢量图形，对于点线之类数据的展现，能得心应手得解决，可运用于地铁、管线这样的应用Qunee支持漫游交互、无极缩放、不限制坐标范围，这很适合地图的呈现，加上多边形丰富的样式，可用于解决地图背景、以及统计地图之类的问题
拓扑图 - 社交网络图、网络管理图
支持节点、连线、分组等图元类型，具有良好的层次控制，支持上万图形元素，并且流畅操作，带来轻快、高效的视觉体验，适合解决网状数据的呈现与交互问题
其他 - 组织图、思维导图、流程图
借助强大的树形布局器，可以解决树形结构数据的自动布局问题，可运用于组织图、思维导图等提供丰富的基本图形与箭头样式，支持弯曲、正交等连线类型，加上包含关系的控制，可以解决流程图之类的问题
先介绍一个简单的Hello Qunee程序。
<!DOCTYPE html>
<html>
<head>
<title>Hello Qunee for HTML5</title>
<meta charset="utf-8">
</head>
<body>
<div style="height: 500px;" id="canvas"/>
<script src="../js/qunee-min.js"></script>
<script>
/**
* This file is part of Qunee for HTML5.
* Copyright (c) 2016 by qunee.com
**/
if(!window.getI18NString){getI18NString = function(s){return s;}}
var graph = new Q.Graph(canvas);
var hello = graph.createNode("Hello", -100, -50);
hello.image = Q.Graphs.server;
var qunee = graph.createNode("Qunee", 100, 50);
var edge = graph.createEdge("Hello\nQunee", hello, qunee);
edge.setStyle(Q.Styles.LABEL_OFFSET_Y, -10);
edge.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_TOP);
edge.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_BOTTOM);
edge.setStyle(Q.Styles.LABEL_BORDER, 1);
edge.setStyle(Q.Styles.LABEL_POINTER, true);
edge.setStyle(Q.Styles.LABEL_PADDING, new Q.Insets(2, 5));
edge.setStyle(Q.Styles.LABEL_BACKGROUND_GRADIENT, Q.Gradient.LINEAR_GRADIENT_VERTICAL);
</script>
</body>
</html>
只要懂英文，内容应该是不难理解的，程序创建了一个hello 和Qunee节点，还有一条edge线，后面就是设置edge的样式。运行结果为
