分享一套基于HTML5的网络拓扑图组件 Qunee下载

最新推荐文章于 2024-09-02 20:49:30 发布

zzc0000

最新推荐文章于 2024-09-02 20:49:30 发布

阅读量1.3k

点赞数

分类专栏： android 物联网文章标签： JS拓扑图 html5 javascript ViewUI

本文链接：https://blog.csdn.net/zzc0000/article/details/84628158

版权

android 物联网专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一套基于HTML5的网络图组件

使用HTML5 Canvas技术，绘制清新、流畅的网络图，可用于社交网络图、拓扑图、流程图、地图等需求， JS组件封装，藏繁琐于简洁，轻松构建优雅的互联网应用与企业应用，让数据的在线可视化变得容易

下载地址：http://im.gitom.com/qunee/demos

有什么问题可以与我联系 QQ：285264911

组件特点

轻巧、高性能 - 支持上万图元，流畅操作
矢量图形 - 支持矢量图形，无极缩放
交互体验 - 漫游交互，改进交互事件、支持手持设备
注重细节 - GIF动画，丰富渐变，层次控制等

Qunee发音

Qunee - 发音为“kjuːni”，寓意优雅轻巧，符合我们对于产品细节与用户体验的一种态度

提供Web图形解决方案

地图 - 地铁图、统计地图

Qunee提供的丰富矢量图形，对于点线之类数据的展现，能得心应手得解决，可运用于地铁、管线这样的应用

Qunee支持漫游交互、无极缩放、不限制坐标范围，这很适合地图的呈现，加上多边形丰富的样式，可用于解决地图背景、以及统计地图之类的问题

拓扑图 - 社交网络图、网络管理图

支持节点、连线、分组等图元类型，具有良好的层次控制，支持上万图形元素，并且流畅操作，带来轻快、高效的视觉体验，适合解决网状数据的呈现与交互问题

其他 - 组织图、思维导图、流程图

借助强大的树形布局器，可以解决树形结构数据的自动布局问题，可运用于组织图、思维导图等

提供丰富的基本图形与箭头样式，支持弯曲、正交等连线类型，加上包含关系的控制，可以解决流程图之类的问题

轻松开发

Qunee for HTML5使用JavaScript语言进行开发，引入qunee-min.js文件，编写简单的代码，就可以开发出来网络拓扑图

<!DOCTYPE html><html><head><title>Hello Qunee for HTML5</title><scriptsrc="http://demo.qunee.com/lib/qunee-min.js"></script><script>function init(){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></head><bodyonload="init();"><divstyle="width:800px; height:500px; margin:auto;"id="canvas"/></body></html>