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> …

地图应用分三种级别：示意地图（Map Chart），地图（Map），地理信息系统（GIS），第一种通常使用相对坐标系，后两种则为真实的地理坐标，其中第二种以谷歌地图为代表，日常生活中普遍使用，后一种则为专业的GIS，专业领域做拓扑分析、流域分析时用到，示意地图我们已经有很多例子，比如[美国大选示例](http://demo.qunee.com/#U.S. Presidential Election 2012)、[中国地图示例](http://demo.qunee.com/#China Map)等，今天介绍第二种地图的应用，结合OpenLayers和谷歌地图实现地图的拓扑图应用：demo.qunee.com/map/map.html …

多位客户提到编辑器的需求，譬如拖拽创建节点，文本编辑，连线编辑，尺寸编辑等等，编辑是一个系列话题，将陆续作介绍，本章介绍拖拽创建节点与简单的连线编辑交互 拖拽创建节点 拖拽创建节点，以前要实现拖拽，需要监听全局mousemove事件，复制拖拽元素，实现drop效果，现在HTML5提供了新的拖拽事件，处理起来变得很容易 创建画布面板canvas，并在左侧创建一个工具箱toolbox，设置canvas监听drop和dragover事件，工具箱中的图片监听dragstart事件，并设置为可拖拽 <div id="canvas" ondrop="drop(event)" …

客户常常提到思维导图，喜欢它的结构展示方式，和交互的友好，从图论的角度看，思维导图本质上是一种树，有一个根节点（主题）出发，联想到其他话题，于是分支开花，再分支，有时候也会构成网络结构，由子分支联想到另一个已有分支，但通常不破坏原有结构，常见的思维导图如下 XMind制作的思维导图 制作思维导图应用 Qunee组件本身支持树形布局，所以对于思维导图的大体结构是可以呈现的，到细节的地方就比较多了，包括线条的走向，节点的样式，布局交互，自动吸附，双击编辑等等，本示例没办法面面俱到，所以参照XMind的效果，只实现了部分功能，供用户参考和扩展 连线定制 默认连线为直线，通过定制EdgeUI可以实现曲线效果 function …

地图是一种普遍应用，按准确度分精确地图（GIS）和示意地图（MapChart），前者支持各种地图投影与坐标系，譬如ArcGIS，后者使用相对坐标系，或者支持简单的WGS84经纬网坐标系，比如ILOG Elixir地图组件，示意地图再按图片类型分，可分为：栅格地图与矢量地图，Qunee组件适合制作矢量示意地图。 中国地图示例 数据格式 数据格式为JSON，里面包含三种类型：paths、points、labels，分别对应地图区块，地图点图元，文本标签 { paths:{ "0": { "path": "M 377.651,468.883 C 378.90893,469.42985 …

某市政项目用到地铁图展示，展示地铁站点以及相关信息流，使用Qunee组件可以很好的解决这类需求，做出优美的展现，下面以上海2012地铁图为例，效果如下： 示例讲解 首先需要解决数据问题，可以从维基百科或者上海地铁官网中获取，不过也免不了人工，要达到良好的显示效果，需要不只要记录站点的位置，还需要设置文本标签的理想位置，有时为了避免文字叠加，需要设置旋转角度……总之事在人为，想想办法，最终解决了数据问题，再加上Qunee图形组件的强大展示效果，做出来可以交互的在线地铁图 数据格式 采用JSON格式数据，分三种类型：文本标签、站点、地铁线 总的结构如下： { "labels" : [ ... …

中科院的某个客户遇到这样的需求：将区域内所有水文观测站信息按层次结构展现出来。原来用的是mxGraph组件，遇到几个问题：布局难以定制、节点样式难定制、交互有问题，后来改用Qunee组件，顺利解决问题。 这是一种典型应用，主要用到Qunee的布局类TreeLayouter，以及UI和交互的简单定制，下面以示例来做介绍 需求分析 按水文观测站区域与级别分五个等级，最顶层的是主站点，下面分区站点，再往下子站点，最后是实际观测点或者设备，因为站点总数量几千上万，为了便于查看，采用动态加载方式，点击站点节点的加号，动态加载子站点，并执行自动布局 最终的效果类似下面截图 示例介绍 初始化图形组件 这里将Graph组件直接嵌入 …