整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
eXt-UI是什么？
NeXt UI 工具包是一个基于 HTML5/JavaScript 的网络 Web 应用程序工具包。它提供了一个以网络为中心的拓扑 UI 组件，具有高性能和丰富的功能。NeXt 可以显示大型复杂网络拓扑、聚合网络节点、流量/路径/隧道/组可视化，它包括不同的布局算法、地图叠加和预设的用户友好交互。
---转载自NeXt-UI的GItHub地址简介https://github.com/NeXt-UI/next-bower
虽然NeXt-UI已经停止更新了，但是思科仍然在官网上花了很大篇幅展示这个模块，这也正是我们要学习这个模块的理由.
好了，话不多说，开始正文部分吧。
首先我们需要在cisco网页上down下NeXt-UI的文件包 https://d1nmyq4gcgsfi5.cloudfront.net/fileMedia/025dc509-8f2a-474a-b6d8-75e73ecbd6ac/NeXt_trial.zip
文件的架构大概就是上面的那个类型，然后我们开始构建拓扑所需要的文件
一、新建一个index.html文件***/NEXTUI/js/next/css/next.css 这一块地址可以写相对路径也可以写绝对路径
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="***/NEXTUI/js/next/css/next.css">
<script type="text/javascript" src="***/NEXTUI/js/next/js/next.js"></script>
</head>
<body>
这是一个新的NeXt-UI文件
</body>
</html>
二、更改app.js的配置，这个是调用data.js的文件，一般无需更改
(function(nx){
// instantiate NeXt app
var app=new nx.ui.Application();
// configuration object for next
var topologyConfig={
// special configuration for nodes
"nodeConfig": {
"label": "model.name",
"iconType": "router"
},
// special configuration for links
"linkConfig": {
"linkType": "curve",
},
// if true, the nodes' icons are shown, otherwise a user sees a dot instead
"showIcon": true,
// automatically compute the position of nodes
"dataProcessor": "force",
"width": 1920,
"height": 1080,
};
// instantiate Topology class
var topology=new nx.graphic.Topology(topologyConfig);
// load topology data from app/data.js
topology.data(topologyData);
// bind the topology object to the app
topology.attach(app);
// app must run inside a specific container. In our case this is the one with id="topology-container"
app.container(document.getElementById("topology-container"));
})(nx);
三、更改data.js的路径，这边就是写的设备的一些信息，主要分为三个部分nodes、links、nodeSet
ndoes:代表某一个设备，里面的内容都是设备的相关信息。
links：代表哪几个设备相关联，分为source和target
nodeSet；代表哪几个设备为一个分组。一个分组可以在页面展示为一个设备，需要时可以展开
配置如下
var topologyData={
nodes: [
{
"id": 0,
"name": "New York",
"mgmt_ip": "1.1.1.1",
"icon": "switch"
},
{
"id": 1,
"name": "Los Angeles",
"mgmt_ip": "1.1.1.2",
"icon": "router"
},
{
"id": 2,
"name": "Houston",
"mgmt_ip": "1.1.1.3"
},
{
"id": 3,
"name": "Beijing",
"mgmt_ip": "1.1.1.4"
}
],
links: [
{
"source": 0,
"target": 1
},
{
"source": 0,
"target": 2
},
{
"source": 0,
"target": 3
},
{
"source": 3,
"target": 2
}
],
nodeSet: [
{
"id": 4,
"nodes": [1,2]
}
],
};
现在我们只需要打开index.html文件即可看到网络拓扑图了
后面我们可以讲一下如何使用nornir+NeXt-UI来自动绘制拓扑
扑社3月30日报道 （文：窦悦怡）
据统计，2013年全球将有10亿手机浏览器支持HTML5，同时HTML Web开发者数量将达到200万。毫无疑问，HTML5将成为未来5-10年内，移动互联网领域的主宰者。
同时，据IDC的调查报告统计，截至2012年5月，有79%的移动开发商已经决定要在其应有程序中整合HTML5技术。
拓扑社了解到，2014年Html5技术以跨平台应用，融合视频等技术优势，逐渐显现其未来web开发的趋势。
而且，HTML5自身的多设备跨平台特点也有利于品牌的传播，用户可以通过Html5页面应用生成器，以移动展示作为切入点，帮助用户像操作PPT一样展示自己的创意，用户通过PC端制作，在线使用模板，便可利用图文、音乐、动画和视频等多种形式制作个性化微场景，然后进行分享。
因此，一些基于H5移动营销的创业型公司应运而生，易企秀便是其中之一。易企秀是一个社会化营销服务平台。2018年1月，易企秀完成B+轮6400万元融资，由东方富海领投，易企秀老股东宽带资本、中网创投、金慧丰继续跟投，B轮总计1.24亿元。
近期，拓扑社采访到了易企秀的创始人黄金，与他聊聊H5社会化营销这件事，以及易企秀的闭环生态布局背后的思考。
“外界对易企秀的定义有的是H5制作公司，有的是营销公司，您怎么看这种争议？”采访的开始，拓扑社给黄金抛出这样的问题。
黄金很坦诚地告诉拓扑社，H5与营销是两个概念，两种分类，不过两者很难界定开来。H5最初只是代表一种语言，现在已经发展成一种展现形式；而营销是一个很宽泛的概念，无论是CRM营销，还是制作物料，以广告形式展现推广内容，这些都是营销，在这种情况下两者就存在交集了。
“这样一来，很难界定易企秀到底是H5制作公司还是营销公司，但是我们最初的想法就是，先确定谁是易企秀的用户，他们最痛的点是什么，我们就为他们解决问题。现在易企秀的用户定义的很清楚，就是中小企业。”
拓扑社了解到，在过去，企业专注于产品生产，在对外传播渠道上是缺少能力的，而现在就不同了，微信类社交产品的发展，为企业营销提供了自我营销成长的土壤。
在这样的环境下，如果企业自己不提高对外营销能力，将市场营销的命脉托付于第三方服务公司，弱肉强食的商业环境下，这将会是这家公司的灾难。
但是，对于中小企业而言，要想做一个在线宣传资料，需要很多专业的美工、设计师一起配合，同时整个制作包含域名、备案、上传，复杂等环节，操作繁杂，成本高，效率低。
针对这些问题，易企秀以H5技术为切入点，为中小企业提供包含场景制作、展示互动、数据收集、客户管理、二次营销的闭环营销服务。
其实，最初易企秀从H5制作起家，逐渐向企业内容创意平台，拓展到后端广告渠道，推送广告等业务，再通过后台的SaaS系统收集用户数据，沉淀数据库，分析用户的行为，进行二次营销，达成一个闭环的营销服务模式。
黄金表示，一切业务布局的逻辑都是围绕用户的需求进行拓展。一切围绕用户痛点来展开，先满足痛点，产品功能可用。再改进使用体验，让用户使用起来简单。最后满足用户的视觉享受，让这个产品看起来很高大上。
“用户需要什么，我们恰好能够提供这些服务，进而可以拓展相关业务；如果我们提供的服务，不是用户所需要的，这就得不偿失了，就会与用户产生隔断，始终跨越不过去。”
在产品布局上，易企秀采用的是一种双边模式，具体来说就是，基于易企秀SaaS模式编辑器系统，一边接入易企秀商城，商城里会对接各种素材模板，这些模板会有大量的素材供应商、模板设计师提供。
另一边接入的是企业端用户，用户既可以选择适合自己宣传模式的模板，也可以根据自己的需求，选择合适的模板素材，在易企秀的编辑平台进行编辑。
据悉，在商城的素材供应商选择方面，易企秀都是选择各个领域的领先平台。例如，易企秀与方正、汉仪、腾祥、天音在线、松巴音乐、视觉中国、高品图像、蚊子动漫等十几家涵盖字体、图片、音乐等全品类设计素材厂商。
黄金告诉拓扑社，易企秀会专门设有素材审核人员，对素材供应商提供的素材依据标准进行审查，也会对为用户提供服务的过程进行监控。
而素材选择的标准主要有三点，第一，简单易用。用户拿到模板后容易上手使用。第二，创新性。供应商提供的素材必须有创新性，不能与库的素材有雷同。第三，要保证素材的版权。
在具体的服务流程上，黄金戏称是“建推管再”，打造闭环营销模式。首先，易企秀通过H5帮助用户在线制作宣传素材，以微信朋友圈的形式病毒式推广，加强企业与消费者的互动性。其次，用户通过易企秀提供的付费流量（包涵朋友圈广告、本地朋友圈广告、公众号广告等社交类平台流量），增加H5曝光量。
再次，易企秀把H5传播后获取的数据收集到自己的管理系统，进行数据沉淀，再用数据化的技术手段对其进行监控、分析，以表单的形式反馈给用户，指导他们进行二次投放，进而形成一个闭环模式。
这样，易企秀不仅为用户提供大量的案例、模板，设计器支持自由的拖拽，用户可轻松上手，实现自己的营销创意。
用户还可自定义场景中的动态效果，注重交互体验。场景应用推广方面，他们提供了社会化分享渠道及效果追踪，让中小企业去自己发现哪些渠道效果好、哪些场景效果好，从而改善营销设计方案。
黄金坦言，目前易企秀只是完成了一个小闭环，初步建立一个小生态园，未来会在产品里加入更多的技术手段，使其编辑系统更加智能化、模版众包化、服务轻量化。未来会开放编辑器能力，提供API接口，让更多行业伙伴使用易企秀的编辑能力为用户服务。
在盈利模式上，易企秀主要有三方面盈利来源，对于B端采取免费+增值服务的模式，高级会员，易企秀会提供培训、审核，CDN加速等增值服务。
对于供应商端，易企秀在产业链上游对接大量的正版素材源，包括字体、图片、音乐等，企业可以按需购买。
在产业链下游对接名片天下等印刷厂制作宣传材料，为其进行流量推广，易企秀收取服务费。此外在线上也可以帮助企业扩大推广范围，提供精准的数据分析，精准营销等服务。
据悉，易企秀目前已有3000多万的企业用户，累计设计师（秀客）10万名，供应商几十家，平台营收能力已经进入快速增长期。
日常项目建设和实施过程中，经常会遇到类似数据可视化的实现场景。对于数据可视化已经从简单的统计图表展现，扩展到类似监控大屏，拓扑图，流程编排图，集成架构图等方面的呈现。而这些往往不是简单的使用图表就能够解决的。
因此今天总结下对于数据可视化和图形绘制方面的工具整理。
推荐首先阅读知乎的关于有哪些可视化工具推荐的回答，内容已经相当全面了
https://www.zhihu.com/question/19929609
要注意的是当前主流的仍然是基于javasrcirpt开发的图表库，对于偏重的flex不应该作为选择的基础。下面对一些选择的思路做些简单的说明。
首先可选的主流图表库包括了百度的Echart，Highchart，D3.js这三个。
这三个可视化图表库的使用客户也相当多，能够应对的常见可视化场景也足够。对于百度的Echart又推出有新的V4.0版本，虽然支撑的图表扩展没有大的变化，但是在性能上有明显改进。当然从支持的图表类型种类和开放性来谈，最强大的还是D3.js，但是前面两种已经能够基本满足实际的图表层面使用的需要。
对于百度Echart，对里面的关系图做了详细分析后，实际上没有找到用来做网络拓扑图的工具，系统集成关系图的组件。当然百度Echart里面有的关系图，桑基图，地图，热力图迁徙图，矩阵图，日历图，树图等功能已经足够强大。
采用百度Echart也很容易自己来实现类似监控大屏这种前端应用。
对于网络关系图，在可视化里面常见的一种类型，其中主流的应该是Gephi，Gephi是一款开源免费跨平台基于JVM的复杂网络分析软件, 其主要用于各种网络和复杂系统，动态和分层图的交互可视化与探测开源工具。其次是R语言中的iGraph和networkD3包，功能也足够强大。还有就是基于python语言实现的networkx，是专门进行网络可视化呈现的一个小工具。
Gephi地址和例子参考：https://gephi.org/
对于商用的图表和可视化工具当然是Tableau，据Gartner魔力象限，2014年的测评，tableau可执行速度最快，整体市场表现也在前列。在Tableau官方网站可以免费下载到桌面试用版进行试用。
如果仅仅是提供常用的画图API接口，自己完全根据需要绘制SVG渲染图，对于这种场景你仍然可以选择Echart和Highcharts来实现，在官方网站也有制作SVG渲染图的例子。
当然还有一类即经常用于网管类，日志类监控分析的前端图表展示软件，在ELK日志分析系统 Logstash+ElasticSearch+Kibana4里面会使用Kibana4进行前端图表展现。
Grafana是另外一个基于JavaScript的前端展示工具，Grafana provides a powerful and elegant way to create, explore, and share dashboards and data with your team and the world。对于Grafana支持Graphite, Elasticsearch, Prometheus, InfluxDB, OpenTSDB and KairosDB各种数据采集源。
对于Grafana当前和类似InfluxDB时序数据库结合的很紧密，可以很容易是基于时序数据的可视化图表展示，包括当前在Kurbernetes里面用的很多的Prometheus监控方案，仍然是基于时序数据库和Grafana来实现资源性能监控。
Grafana的官方地址：https://grafana.com/
最后说下Processing，功能相当强大，但是要有一定的开发基础和学习门槛，Processing 在 2001 年诞生于麻省理工学院（MIT）的媒体实验室，主创者为 Ben Fry 和 Casey Reas，当然还有来自 Carnegie Mellon、洛杉矶的加利福尼亚大学以及迈阿密大学等的贡献。
具体例子可以参考：https://processing.org/examples/
数据可视化和图表仅仅是前端呈现的工具，对于数据可视化最重要的还是首先要搞清楚你当前有哪些数据，数据本身的结构和数据间关系是如何的？其次搞清楚数据呈现的场景和模式，其次才是呈现问题。
对于ESB服务总线，特别是涉及到两级架构集成的时候，采用类似拓扑图的可视化思路来进行集成架构和部署架构图的可视化是一个可选的方案。基于拓扑图可视化为关键字搜索，搜索到两个可视化工具软件，虽然都是付费软件，但是对于拓扑图，部署架构，集成关系图等方面的展示能力还是相当强。
TWaver工具：http://www.servasoft.com/
TWaver关注于数据的图形展示，它是面向开发人员的，需要进行二次开发。
TWaver的图形组件库中提供了拓扑组件、地图组件、设备图组件，以及表格、树图、属性表、图表等丰富的通用图形界面组件，为电信运营支撑系统（OSS）的开发提供“一站式”的组件产品和解决方案，是快速设计、开发和部署OSS的利器。
可以看到TWaver本身的功能相对强大，完全可以胜任复杂的资源拓扑图的设计，但是如果仅仅用于拓扑图展示的话有点大材小用。
对于TWaver，实际上可以看到对于数据中心资源和资产的全三维可视化建模是另外一个做的相当好的地方。这个软件可以实现数据中心内所有设备对象的虚拟仿真，以完全3D模式构建整个数据中心环境，并将数据中心内的监控子系统，如视频、动环、门禁等，纳入到可视化机房管理平台中来，实时分析查看监控信息。 软件采用B/S架构，无需安装任何插件即可在浏览器中流畅漫游数据中心三维场景,实现数据中心级、机房级、机柜级、设备级和端口级管理和监控。
类似下图：
Qunee工具：http://qunee.com/
Qunee是一套基于HTML5的网络图组件。其使用HTML5 Canvas技术，绘制清新、流畅的网络图，可用于社交网络图、拓扑图、流程图、地图等需求， JS组件封装，藏繁琐于简洁，轻松构建优雅的互联网应用与企业应用，让数据的在线可视化变得容易。
在网站上有详细的例子可以参考，可以看到Qunee相对来说轻量些，用于实现一些简单的网络拓扑，集成架构图展示完全可以满足去。
类似上图，可以很方便的通过Qunee提供的可视化设计工具实现。
基于这些可视化拓扑设计工具，结合ESB服务总线集成实际的集成场景来说，初步考虑可以应用的点包括如下。
1. 实现两级架构的拓扑图效果展示和接口服务集成监控。
布局原来一直太强调结合地图进行展示，实际上效果并不一定太好。这里可以直接自己定义布局模式，初步想法就是中心为集团，四边方框来线上各个省或子公司。形成完整的两级集团展示效果。这种展示方式也方便直接线上到大屏上去。
2. 对于当前ESB平台本身的资源和服务状态监控可视化
这套可视化工具很容易实现这点，我们只需要先可视化的设计出部署架构布局，然后再将实际对数据库，应用中间件资源，包括服务运行的各种状态信息，异常信息直接显示到整体部署逻辑架构图上即可。这样可以更加可视化的监控到资源当前的运行状态和异常发生情况。
3. 服务集成架构展示
在最早我们做自研ESB产品的时候，采用Flash实现了一个集成架构的展示效果，但是整体效果并不是很好。而通过这套可视化工具，可以用来实现这种集成架构的效果展示。同时可以展示出两级架构的集成效果。即可以分层展开效果。
集成架构不需要提前进行设计，而是需要在后台提取了集成关系后，自动进行拓扑生成和自动化布局。集成架构中的连线可以用来表示当前系统间的接口服务连通性和接口服务调用流量等信息。但是上图实际上离我们需要的集成架构图可视化设计仍然有具体，具体见后面集成架构图设计部分的一些思考。
4. 端到端流程监控可视化设计
基于服务间的集成关系和调用先后顺序来实现端到端的流程监控，这个我在博客前面多次提到，也一直在寻找比较好的前端设计工具来做。比如对我们已有的流程平台流程建模工具前端进行适度改进来支持等。
对于这类需求也可以用前面提到的工具来实现，先进行端到端监控流程图的设计，然后在进行运行展示。其中最主要的还是在运行态的各类信息，比如运行状态，数量，是否有异常等是否很容易叠加到已有的设计图上。只要能够解决这个问题，那么就能够很好的应用到端到端流程监控的可视化设计中。
对于集成架构图的绘制一直是我关注的一个点，也看了类似百度Echart，D3和HighChart等，基本都没有发现适合用来做类似集成架构图绘制的工具。同时集成架构图往往都不是自动绘制，而需要提前进行集成架构的图形布局设计，布局好后才能够用JS去绘制。
因此更多我们需要的是一个JS绘图工具库，能够汇总线条，矩阵，圆等基础图形形状即可。我们可以看下一个简单的集成架构图，经过设计排版后布局可能如下：
对于这类图可以看到实际上各类可视化图表库并不太容易实现。原来我们采用过Flash来进行集成架构图的绘制，但是Flash相对偏重不太合适。因此还是需要找一个JS绘图库来实现这种简单的集成架构图的绘制工作。
基于这个思路我们在网上找了下比较好的一些JS绘制工具库。
jsPlumb开源流程图绘制工具库
那么如果你应该使用它取决于你想用jsPlumb做什么。该框架适用于必须绘制图表的Web应用程序，例如类似于Visio的应用程序或工作流程设计器等。由于图表项目和连接的所有参数都是非常精细可控的，因此您可以绘制您可以想到的任何类型的图表。
该开源库的GitHub地址为：https://github.com/wangduanduan/jsplumb-chinese-tutorial
在该地址也有详细的中文使用教程，根据教程的一些截图可以看到，该工具库很适合用来绘制我们上面的集成架构图，因为这种图本身也就是形状和线条的一些简单组合，而且来拖拽功能都不需要。
当然基于该工具库，我们也可以用来实现更加复杂的集成架构图，即将两个业务系统间的所有关键集成接口全部以连线的方式表示出来。这种集成架构图也是无法自动生成，需要首先进行整体部版设计，然后再通过jsPlumb工具库进行绘制即可。
如果要连接多条线条，需要整个节点作为source或者target， 并且将锚点设置成Continuous，那么锚点就会随着节点的位置改变而改变自己的位置。这个功能特性可以很方便我进行多线条设置。
注意在这个网址，https://jsplumbtoolkit.com/community/doc/anchors.html， 这个工具库是存在License费用的，因此如果这个工具库用于商业用途，按道理会涉及到License的购买问题。
一篇关于该工具库的使用参考：https://www.cnblogs.com/xcj26/p/9870734.html
另外一个用该工具库实现的流程设计器和表单设计器： http://formdesign.leipi.org/
付费JS绘制工具库：GoJS
GoJS是一套基于JavaScript的付费图形绘制工具库，地址：https://gojs.net/latest/index.html
这套工具库有免费版本，也有收费版本，收费版本比jsPlumb工具库来说就强大了很多，特别是动态Port图和动态分组图，这两个用来绘制我们集成架构图，应用架构图等都相当有用。
所有Demo演示地址参考：https://gojs.net/latest/samples/regrouping.html
JointJS工具库
这个也是常用的绘图工具库，地址在：https://www.jointjs.com/
这个库官方介绍的例子都感觉比较重，而实际其它搜索到的一些使用介绍来看，用于简单从集成架构图，流程图类绘制还是没有太大问题的。基本还是标准的新建画板，画布，然后进行各种图形的定义和绘制。
jointJS是一个基于svg的图形化工具库，在画布上画出支持拖动的svg图形，而且可以导出JSON，也能通过JSON配置导入直接生成图形。由于这个工具库是基于SVG的，因此也不太推荐使用。
一篇使用参考：https://segmentfault.com/a/1190000015972176
Quick V 是一套数据可视化大屏展示方案。在大数据时代，Quick V 将数据全面、直观地呈现在用户眼前，帮助管理者在面临业务复杂度的急剧变化时，即刻拥有海量有序的决策支持信息，满足会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求。
参考：http://www.uileader.com/quickui_display.html
大家可以先看下上面这个大屏可视化效果，感觉整体还是做的相当不错。这个工具本身商用收费，比较好的就是对于我们常见的大屏监控已经固化为各种模板，基本都可以直接使用。
基于百度Echart自己实现可配置的监控大屏
在前面我也谈到，实际上对于监控大屏实现，当前我们完全可以采用百度Echart来定制实现，而这篇文章主要想谈下如何对监控大屏可视化做到灵活可配置。
首先我们看到监控大屏可视化，实际上跟我们前面谈到的自定义报表相当类似，其核心仍然是单面板设计，多面板组合。基于这个思路我们逐一展开进行描述。
在讲自定义报表的时候，我们单面板设计数据集和实际的数据呈现是耦合在一起的，而实际上更好的思路是数据集和数据呈现进行分离。基于这个思路，逐一展开讲关键功能点实现。
数据集设计
数据源定义，对于数据源定义，最好也进行独立，一个报表前端呈现本身也可能涉及到多个数据源。数据集设计，即返回一个二维的数据集合，可以有多列。我们需要通过配置的方式来实现，即首先选择数据源，然后自定义Sql语句，然后返回具体的数据集对象。在sql过程中我们可以对字段标题名称等进行转义。
更加解耦的方法是数据集可以直接选择具体的WS服务，由服务返回一个二维的数据集对象。这种方式可以进一步实现报表平台和底层数据库的解耦。
单面板设计
单面板设计简单来说就是将前端的呈现方式，究竟是折线图，饼图还是雷达图等，和后端的数据集进行绑定。在这个过程中重点是要确认具体的图表呈现的一些关键配置，包括X，Y轴显示，图表名称，图例是否显示等关键配置，都需要在单面板设计的是配置完成。
单面板设计完成后，最好提供预览功能按钮，可以马上体验到单面板展示的效果。
大屏设计
对于大屏设计，实际上里面有几个关键点，首先就是大屏展示需要有一个CSS模板，这个模板决定了所有的单面板图表的配色风格，包括具体的底色，前端的色系选择等。选择模板就是确保最终的大屏展示各个单面板风格能够完全保持一致。
大屏版面设计，仍然采用标准的Grid布局模式即可，可以看到所有的大屏展示基本都采用Grid布局模式。每个单面板你唯一要确定的就是横向跨几行，纵向跨几列即可。类似上面的图，我们采用4*4Grid进行布局，中间的地图展示则是横向跨3行，纵向跨两列。
大屏整体的展示动态刷新能力
在以上设计完成后，我们整个大屏展示效果也就出来了。在该大屏设计中我们没有考虑动态查询功能。但是大屏监控仍然需要动态进行刷新。因此在设计大屏的时候需要具备动态刷新能力，为了考虑后续具备一定的扩展性，我们需要能够将关键的一些变量参数传递到图表展示中。
最关键的参数就是当前时间，当前的时间需要能够传递到每一个数据集Sql中，方便我们根据时间进行数据过滤。同时对于大屏我们需要配置定时刷新频率，基于该频率对展示内容进行动态刷新。
*请认真填写需求信息，我们会在24小时内与您取得联系。
