1、Qunee for HTML5（以下簡(jiǎn)稱Qunee）是一套基于HTML5技術(shù)的圖形組件產(chǎn)品，使用HTML5 Canvas技術(shù)，繪制清新、流暢的網(wǎng)絡(luò)圖，可用于社交網(wǎng)絡(luò)圖、拓?fù)鋱D、流程圖、地圖等需求， JS組件封裝，藏繁瑣于簡(jiǎn)潔，輕松構(gòu)建優(yōu)雅的互聯(lián)網(wǎng)應(yīng)用與企業(yè)應(yīng)用，讓數(shù)據(jù)的在線可視化變得容易。
Qunee - 發(fā)音為“kju?ni”，寓意優(yōu)雅輕巧
2、Qunee可用于拓?fù)鋱D，流程圖，組織圖，機(jī)房平面圖，組態(tài)軟件的開(kāi)發(fā)，具有輕量、高效、靈活擴(kuò)展的特點(diǎn)，支持目前主流瀏覽器（Safari, Firefox, Chrome, IE9+），可運(yùn)行在不同操作系統(tǒng)（Windows, Mac, Linux......）和移動(dòng)終端（iOS，Android，Windows Phone......），借助PhoneGap之類的移動(dòng)開(kāi)發(fā)框架，可以開(kāi)發(fā)移動(dòng)應(yīng)用程序。
Qunee提供Web圖形解決方案：地圖 - 地鐵圖、統(tǒng)計(jì)地圖拓?fù)鋱D - 社交網(wǎng)絡(luò)圖、網(wǎng)絡(luò)管理圖其他 - 組織圖、思維導(dǎo)圖、流程圖
Qunee組件的特點(diǎn)：
輕巧、高性能 - 支持上萬(wàn)圖元，流暢操作矢量圖形 - 支持矢量圖形，無(wú)極縮放交互體驗(yàn) - 漫游交互，改進(jìn)交互事件、支持手持設(shè)備注重細(xì)節(jié) - GIF動(dòng)畫(huà)，豐富漸變，層次控制等
3、Qunee主要提供Graph組件，Graph中可以加入不同類型的圖元（Node, Edge, Group, ShapeNode, Text, Bus ...），圖元可以配置不同的呈現(xiàn)樣式，或者掛載或者添加不同的UI元素（LabelUI, ImageUI ...），通過(guò)組合和布局，實(shí)現(xiàn)豐富的呈現(xiàn)效果，滿足多種應(yīng)用場(chǎng)景：
地圖 - 地鐵圖、統(tǒng)計(jì)地圖
Qunee提供的豐富矢量圖形，對(duì)于點(diǎn)線之類數(shù)據(jù)的展現(xiàn)，能得心應(yīng)手得解決，可運(yùn)用于地鐵、管線這樣的應(yīng)用Qunee支持漫游交互、無(wú)極縮放、不限制坐標(biāo)范圍，這很適合地圖的呈現(xiàn)，加上多邊形豐富的樣式，可用于解決地圖背景、以及統(tǒng)計(jì)地圖之類的問(wèn)題
拓?fù)鋱D - 社交網(wǎng)絡(luò)圖、網(wǎng)絡(luò)管理圖
支持節(jié)點(diǎn)、連線、分組等圖元類型，具有良好的層次控制，支持上萬(wàn)圖形元素，并且流暢操作，帶來(lái)輕快、高效的視覺(jué)體驗(yàn)，適合解決網(wǎng)狀數(shù)據(jù)的呈現(xiàn)與交互問(wèn)題
其他 - 組織圖、思維導(dǎo)圖、流程圖
借助強(qiáng)大的樹(shù)形布局器，可以解決樹(shù)形結(jié)構(gòu)數(shù)據(jù)的自動(dòng)布局問(wèn)題，可運(yùn)用于組織圖、思維導(dǎo)圖等提供豐富的基本圖形與箭頭樣式，支持彎曲、正交等連線類型，加上包含關(guān)系的控制，可以解決流程圖之類的問(wèn)題
先介紹一個(gè)簡(jiǎn)單的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>
只要懂英文，內(nèi)容應(yīng)該是不難理解的，程序創(chuàng)建了一個(gè)hello 和Qunee節(jié)點(diǎn)，還有一條edge線，后面就是設(shè)置edge的樣式。運(yùn)行結(jié)果為
