当前位置: 首页 > news >正文

jTopo详解

jTopo是什么?

jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas关系、拓扑图形化界面开发工具包

jTopo关注于数据的图形展示,它是面向开发人员的,需要进行二次开发。

使用jTopo很简单,可以快速创建一些关系图、拓扑等相关图形化的展示。只要您的数据之间存在有关联关系,都可以使用jTopo来进行人性化、图形化的展示。

jTopo的目标:1.简单好用 2.灵活扩展 3.轻松开发出类似Visio、在线脑图、UML建模等类似工具 4.为大数据可视化提供解决方案

 

为什么需要jTopo

一、随着软件用户体验的要求不断提高,界面图形化展示、操作往往能给用户带来印象深刻、用户体验度提升的同时也会增加对软件更加认可。

二、一般的软件系统图形界面开发需要花费大量的时间和人力,运行效率低下,界面不够专业美观。如果采用jTopo组件来开发软件界面,可以非常简单快速地创建精美、专业、高效的图形化界面,以便 提高开发效率、增加客户满意度、提高软件竞争力

三、基于Html5的拓扑图函数库比较少,好用的更是寥寥无几,好用又跨浏览器平台的目前就只有jTopo。

四、跨行业:可应用到电信、电力、金融、制造、交通、教育等多个行业的软件开发中。

 

jTopo特点

一、完全基于HTML5 Canvas开发,始终站在开发者的角度设计,API平易近人、几乎简单到了极致。

二、不依赖任何其他库、执行仅需一个Canvas,不污染你的页面、Dom结构和代码命名空间。

三、功能异常强大、灵活,可扩展性极强(为扩展而生),包装一下,就是一款很专业的图形化软件。

四、体积小,压缩后仅几十KB。

五、性能十分优异,可流畅地展示大量数据(经过专业优化过甚至可以展示几十万、百万级别的数据)

六、免费

不足:目前文档不够详细,主要通过Demo来熟悉。

DEMO

<html>
<head>
<title>demo</title>
<script type="text/javascript" src="js/jtopo-min.js"> //引入jtopo
//<script type="text/javascript" src="http://www.jtopo.com/demo/js/toolbar.js"> //菜单工具栏相关代码
<script language="text/javascript">
var canvas = document.getElementById('canvas'); 
var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
var scene = new JTopo.Scene(stage); // 创建一个场景对象
            
var node = new JTopo.Node("Hello");    // 创建一个节点
node.setLocation(300,200);    // 设置节点坐标                    
scene.add(node); // 放入到场景中
</head>
<body>
<canvas width="850" height="550" id="canvas"></canvas>	
</body>
</html>

1、首先引入jtopo工具包。

2、在html中添加canvas标签。(canvas是画布的意思)

3、通过JTopo对象在画布上创建舞台对象。

4、通过JTopo对象在舞台上创建场景对象。

5、通过JTopo对象创建节点对象并放到场景中。

相关文章:

  • javascript中逗号详解
  • HTML 5 Canvas 参考手册
  • JavaScript中的IIFE
  • MIME详解
  • CAS单点登录原理解析及相关配置
  • spring依赖注入三种方式
  • php中json_encode()与json_decode() 的详细用法
  • PHP全局变量global与$GLOBAL详解
  • php知识整理
  • PHP中$_SERVER的详细用法
  • MyBatis整理
  • ButterKnife介绍
  • Android之Activity全面解析
  • Android Fragment使用详解
  • Spring的定时任务(任务调度)
  • 《深入 React 技术栈》
  • Babel配置的不完全指南
  • codis proxy处理流程
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • java正则表式的使用
  • laravel5.5 视图共享数据
  • Redis在Web项目中的应用与实践
  • 码农张的Bug人生 - 见面之礼
  • 前端技术周刊 2018-12-10:前端自动化测试
  • 区块链共识机制优缺点对比都是什么
  • 追踪解析 FutureTask 源码
  • 400多位云计算专家和开发者,加入了同一个组织 ...
  • 阿里云API、SDK和CLI应用实践方案
  • 移动端高清、多屏适配方案
  • ​MySQL主从复制一致性检测
  • ​软考-高级-系统架构设计师教程(清华第2版)【第20章 系统架构设计师论文写作要点(P717~728)-思维导图】​
  • # 达梦数据库知识点
  • #绘制圆心_R语言——绘制一个诚意满满的圆 祝你2021圆圆满满
  • (4)Elastix图像配准:3D图像
  • (C语言)输入自定义个数的整数,打印出最大值和最小值
  • (Forward) Music Player: From UI Proposal to Code
  • (k8s中)docker netty OOM问题记录
  • (八)Docker网络跨主机通讯vxlan和vlan
  • (二)fiber的基本认识
  • (三) prometheus + grafana + alertmanager 配置Redis监控
  • (一)Thymeleaf用法——Thymeleaf简介
  • (原創) 如何將struct塞進vector? (C/C++) (STL)
  • (转)可以带来幸福的一本书
  • ./indexer: error while loading shared libraries: libmysqlclient.so.18: cannot open shared object fil
  • .NET 应用架构指导 V2 学习笔记(一) 软件架构的关键原则
  • .NET/C# 利用 Walterlv.WeakEvents 高性能地中转一个自定义的弱事件(可让任意 CLR 事件成为弱事件)
  • .netcore 获取appsettings
  • .NET面试题(二)
  • .NET使用存储过程实现对数据库的增删改查
  • @CacheInvalidate(name = “xxx“, key = “#results.![a+b]“,multi = true)是什么意思
  • @ConfigurationProperties注解对数据的自动封装
  • @property括号内属性讲解
  • [ solr入门 ] - 利用solrJ进行检索
  • [100天算法】-每个元音包含偶数次的最长子字符串(day 53)
  • [BUUCTF]-PWN:wustctf2020_number_game解析(补码,整数漏洞)