GoJS研究，简单图表制作。

话不多说，先上图

我在这个中加入了缩略图、鼠标放大缩小等功能。

 <!doctype html>

 <html>

 <head>

     <title>Flowchart</title>

     <script src="/Common/Scripts/jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>

     <script src="/Common/Scripts/goDev.js" type="text/javascript"></script>

 </head>

 <body>

     <div id="sample">

         <div id="myDiagram" style="height: 600px"></div>

         <div id="myOverview" style="border: solid 1px blue; width: 180px; height: 80px; position: absolute; top: 0px; left: 0px; background-color: aliceblue; z-index: 300"></div>

         <textarea id="mySavedModel" style="display: none">{"class":"go.GraphLinksModel","linkFromPortIdProperty":"fromPort","linkToPortIdProperty":"toPort","nodeDataArray":[{"key":"2616","category":"A1","text":"宁波智慧物流标准体系"},{"key":"2617","category":"A1","text":"基础通用标准"},{"key":"2622","text":"智慧物流标准化导则"},{"key":"2623","text":"智慧物流术语标准"},{"key":"2624","text":"智慧物流符号与标志标准"},{"key":"2625","text":"分类及代码标准"},{"key":"2626","text":"智慧物流评估标准"},{"key":"2618","category":"A1","text":"智慧物流感知标准"},{"key":"2627","category":"A1","text":"感知设备标准"},{"key":"2640","text":"视频设备技术标准"},{"key":"2641","text":"RFID标准"},{"key":"2642","text":"红外感应设备标准"},{"key":"2643","text":"定位系统设备标准"},{"key":"2644","text":"编码识别设备标准"},{"key":"2645","text":"其他传感器标准"},{"key":"2628","category":"A1","text":"物流通道感知标准"},{"key":"2646","text":"道路感知标准"},{"key":"2647","text":"水路感知标准"},{"key":"2648","text":"铁路感知标准"},{"key":"2649","text":"航空感知标准"},{"key":"2650","text":"管道感知标准"},{"key":"2629","category":"A1","text":"物流节点枢纽感知标准"},{"key":"2651","text":"港口码头感知标准"},{"key":"2652","text":"堆场感知标准"},{"key":"2653","text":"仓库感知标准"},{"key":"2654","text":"货运停车场感知标准"},{"key":"2630","category":"A1","text":"物流装备感知标准"},{"key":"2655","text":"运输工具感知标准"},{"key":"2656","text":"物流单元感知标准"},{"key":"2657","text":"包装、分拣装备感知标准"},{"key":"2658","text":"装卸搬运装备感知标准"},{"key":"2631","category":"A1","text":"企业端信息采集标准"},{"key":"2659","text":"企业信息采集标准"},{"key":"2660","text":"客户信息采集标准"},{"key":"2661","text":"物品信息采集标准"},{"key":"2662","text":"单证信息采集标准"},{"key":"2663","text":"在途信息采集标准"},{"key":"2664","text":"金融信息采集标准"},{"key":"2665","text":"物流资源信息采集标准"},{"key":"2619","category":"A1","text":"智慧物流传输标准"},{"key":"2632","category":"A2","text":"物流政务信息共享与交换标准"},{"key":"2666","text":"基本政务信息共享与交换标准"},{"key":"2667","text":"行业监管信息共享与交换标准"},{"key":"2668","text":"口岸通关信息共享与交换标准"},{"key":"2633","category":"A2","text":"物流基本信息的共享与交换标准"},{"key":"2669","text":"数据与数据元标准"},{"key":"2670","text":"单证标准"},{"key":"2671","text":"报文标准"},{"key":"2634","category":"A2","text":"物流增值业务信息的共享与交换标准"},{"key":"2672","text":"物流金融信息共享与交换标准"},{"key":"2673","text":"物流供应链服务信息共享与交换标准"},{"key":"2620","category":"A1","text":"智慧物流应用标准"},{"key":"2635","category":"A1","text":"平台智慧物流平台标准"},{"key":"2674","text":"公共基础平台标准"},{"key":"2675","text":"专业平台标准"},{"key":"2676","text":"政府监管与决策平台标准"},{"key":"2677","text":"企业智慧信息系统标准"},{"key":"2636","text":"其他"},{"key":"2621","category":"A1","text":"智慧物流安全标准"},{"key":"2637","text":"感知安全标准"},{"key":"2638","text":"传输安全标准"},{"key":"2639","text":"应用安全标准"}],"linkDataArray":[{"from":"2616","to":"0"},{"from":"2616","to":"2617"},{"from":"2617","to":"2622"},{"from":"2617","to":"2623"},{"from":"2617","to":"2624"},{"from":"2617","to":"2625"},{"from":"2617","to":"2626"},{"from":"2616","to":"2618"},{"from":"2618","to":"2627"},{"from":"2627","to":"2640"},{"from":"2627","to":"2641"},{"from":"2627","to":"2642"},{"from":"2627","to":"2643"},{"from":"2627","to":"2644"},{"from":"2627","to":"2645"},{"from":"2618","to":"2628"},{"from":"2628","to":"2646"},{"from":"2628","to":"2647"},{"from":"2628","to":"2648"},{"from":"2628","to":"2649"},{"from":"2628","to":"2650"},{"from":"2618","to":"2629"},{"from":"2629","to":"2651"},{"from":"2629","to":"2652"},{"from":"2629","to":"2653"},{"from":"2629","to":"2654"},{"from":"2618","to":"2630"},{"from":"2630","to":"2655"},{"from":"2630","to":"2656"},{"from":"2630","to":"2657"},{"from":"2630","to":"2658"},{"from":"2618","to":"2631"},{"from":"2631","to":"2659"},{"from":"2631","to":"2660"},{"from":"2631","to":"2661"},{"from":"2631","to":"2662"},{"from":"2631","to":"2663"},{"from":"2631","to":"2664"},{"from":"2631","to":"2665"},{"from":"2616","to":"2619"},{"from":"2619","to":"2632"},{"from":"2632","to":"2666"},{"from":"2632","to":"2667"},{"from":"2632","to":"2668"},{"from":"2619","to":"2633"},{"from":"2633","to":"2669"},{"from":"2633","to":"2670"},{"from":"2633","to":"2671"},{"from":"2619","to":"2634"},{"from":"2634","to":"2672"},{"from":"2634","to":"2673"},{"from":"2616","to":"2620"},{"from":"2620","to":"2635"},{"from":"2635","to":"2674"},{"from":"2635","to":"2675"},{"from":"2635","to":"2676"},{"from":"2635","to":"2677"},{"from":"2620","to":"2636"},{"from":"2616","to":"2621"},

 {"from":"2621","to":"2637"},{"from":"2621","to":"2638"},{"from":"2621","to":"2639"}]}</textarea>

     </div>

     <script type="text/javascript" id="code">

         $().ready(function () {

             $("#mySavedModel").hide();

             $("#myOverview").offset(function (n, c) {

                 newPos = new Object();

                 newPos.left = $("#myDiagram").offset().left;

                 newPos.top = $("#myDiagram").offset().top;

                 return newPos;

             });

             if (window.goSamples) goSamples();

             var GO = go.GraphObject.make;

             myDiagram =

               GO(go.Diagram, "myDiagram",

                 {

                     "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,

                     allowCopy: false,

                     allowDelete: false,

                     allowMove: false,

                     initialContentAlignment: go.Spot.Center,

                     initialAutoScale: go.Diagram.UniformToFill,

                 });

             myDiagram.layout =

               GO(go.TreeLayout,

                 {

                     angle: 90,

                     alignment: go.TreeLayout.AlignmentCenterChildren,

                     compaction: go.TreeLayout.CompactionNone

                 });

             var str = document.getElementById("mySavedModel").value;

             myDiagram.model = go.Model.fromJson(str);

             myDiagram.nodeTemplateMap.add("",

                 GO(go.Node, "Vertical", {

                     locationSpot: go.Spot.Center,

                     isShadowed: true,

                     resizable: false,

                     rotatable: false,

                     layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized

                 },

                     new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

                     GO(go.Panel, "Auto",

                         GO(go.Shape, "Rectangle",

                             { strokeWidth: 1, fill: "#00A9C9" },

                             new go.Binding("figure", "figure")),

                         GO(go.TextBlock,

                             {

                                 font: "bold 13pt 微软雅黑",

                                 margin: 8, maxSize: new go.Size(30, NaN),

                                 stroke: "#ffffff"

                             },

                             new go.Binding("stroke", "stroke"),

                             new go.Binding("text", "text").makeTwoWay()),

                         {

                             cursor: "pointer",

                             click: function (e, obj) { window.open("/cn/stdLibCatalog/StdLibCatalogList_1_20.html?CatalogID=" + encodeURIComponent(obj.part.data.key)); }

                         }

                     ),

                     GO("TreeExpanderButton")

                 ));

             //"category":"A1",

             myDiagram.nodeTemplateMap.add("A1",

                 GO(go.Node, "Vertical", {

                     locationSpot: go.Spot.Center,

                     isShadowed: true,

                     resizable: false,

                     rotatable: false,

                     layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized

                 },

                     new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

                     GO(go.Panel, "Auto",

                         GO(go.Shape, "Rectangle",

                             { strokeWidth: 1, fill: "#00A9C9" },

                             new go.Binding("figure", "figure")),

                         GO(go.TextBlock,

                             {

                                 font: "bold 13pt 微软雅黑",

                                 margin: 8,

                                 stroke: "#ffffff"

                             },

                             new go.Binding("stroke", "stroke"),

                             new go.Binding("text", "text").makeTwoWay()),

                         {

                             cursor: "pointer",

                             click: function (e, obj) { window.open("/cn/stdLibCatalog/StdLibCatalogList_1_20.html?CatalogID=" + encodeURIComponent(obj.part.data.key)); }

                         }

                     ),

                     GO("TreeExpanderButton")

                 ));

             //"category":"A2",

             myDiagram.nodeTemplateMap.add("A2",

                 GO(go.Node, "Vertical", {

                     locationSpot: go.Spot.Center,

                     isShadowed: true,

                     resizable: false,

                     rotatable: false,

                     layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized

                 },

                     new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

                     GO(go.Panel, "Auto",

                         GO(go.Shape, "Rectangle",

                             { strokeWidth: 1, fill: "#00A9C9" },

                             new go.Binding("figure", "figure")),

                         GO(go.TextBlock,

                             {

                                 font: "bold 13pt 微软雅黑",

                                 margin: 8, maxSize: new go.Size(60, NaN),

                                 stroke: "#ffffff"

                             },

                             new go.Binding("stroke", "stroke"),

                             new go.Binding("text", "text").makeTwoWay()),

                         {

                             cursor: "pointer",

                             click: function (e, obj) { window.open("/cn/stdLibCatalog/StdLibCatalogList_1_20.html?CatalogID=" + encodeURIComponent(obj.part.data.key)); }

                         }

                     ),

                     GO("TreeExpanderButton")

                 ));

             /* 设置链接的线条样式 */

             myDiagram.linkTemplate =

                 GO(go.Link,

                     {

                         routing: go.Link.Orthogonal,//AvoidsNodes、Orthogonal

                         corner: 5,

                         toShortLength: 4, relinkableFrom: false, relinkableTo: false, reshapable: false

                     },

                     new go.Binding("points").makeTwoWay(),

                     GO(go.Shape, { isPanelMain: true, stroke: "gray", strokeWidth: 2 })

                 );

             myOverview =

               GO(go.Overview, "myOverview",

                 { observed: myDiagram });

         });

     </script>

 </body>

 </html>

上面为了方便，把代码直接拷贝了几份，设置了默认,A1,A2三种样式，只是为了区分控件的大小。其实控件的大小在参数里也可以设置，加一个属性"size":"100 100"，在设置节点的时候，加一句new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)即可。

支持购买原版http://www.gojs.net。

最新版1.2.8破解，去除水印，下载。

GoJS研究，简单图表制作。的更多相关文章

个人永久性免费-Excel催化剂功能第77波-专业图表制作辅助之批量维护序列点颜色及数据标签
2018年最后一天工作日完成第77波,7是代表完美,2个7,双重的完美,Excel催化剂的2018年从始至终共77波都充满着完美接近极致的功能体验.感谢各位一路相随,陪伴成长.最后一波,再次让数据分析 ...
图表制作软件哪家强？当属火爆商业智能圈的Smartbi
图表制作软件选择多吗? 相对来说,统计图表制作软件还是很多的.比如常见的百度图说还有wps和excel都是可以制作好看的统计图的.关键就是看是在怎样的业务场景下使用.一般情况下,如果你对Excel足够 ...
silverlight visifire控件图表制作——silverlight 后台方法页面事件
1.返回事件 (1.返回silverlight页面,2.返回web页面) private void button_ClickBack(object sender, RoutedEventArgs e) ...
silverlight visifire控件图表制作——silverlight 后台方法ControlChart.xaml.cs
一.构造方法ControlChart 1.前台页面控件赋值 //时间下拉框赋值,下拉框赋选定值 for (int ii = DateTime.Today.Year; ii ...
自学Zabbix3.8.1.1-可视化Visualisation-Graphs简单图表
自学Zabbix3.8.1.1-可视化Visualisation-Graphs简单图表 Zabbix提供了一些简单的图表,用于可视化由项目收集的数据. 用户不需要进行配置工作来查看简单的图表.他们是由 ...
【转】Django 图表制作（By Highcharts）
马克,待不时之需 Django 图表制作(By Highcharts):https://blog.csdn.net/Temanm/article/details/54141759 免费而优秀的图表JS ...
实验报告系列：实验一 HTML语言的简单网页制作
实验一 HTML语言的简单网页制作一.实验目的: 1．掌握常用的HTML语言标记: 2．利用文本编辑器建立HTML文档,制作简单网页. 3．学习将其它格式的文档转换成HTML格式的文档二.实验内容 ...
web前段canvasjs图表制作一
关于web图表制作的方法有很多种,大家可以去网上这里我就介绍我经常使用的一种方法CanvasJS,这也是一款非常容易掌握并且好用的一种方法. 首先可以去网上下载canvasjs.js插件.下载路径:h ...
Highcharts使用教程（1）：制作简单图表
今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一在网页中添加一个div.设置id,设置图表长.高.代码如 ...

随机推荐

HW4.31
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
nyoj 1100 WAJUEJI which home strong！
WAJUEJI which home strong! 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述在一个山沟里,姐弟俩同时考上了大学.但由于家里拮据,所以这并不是 ...
ios 中介者模式
中介设计模式在ios中普片应用于视图迁移 1,从xib中生成object对象,中介类为n个不同对象 @property(nonatomic,retain)IBOutlet NSObject *ob; ...
Java中的Stringbuffer类解析
StringBuffer类和String一样,也用来代表字符串,只是由于StringBuffer的内部实现方式和String不同,所以StringBuffer在进行字符串处理时,不生成新的对象,在内存 ...
几种不同风格的Toast
一般情况下,我们使用Toast默认的风格就行了,只是有些时候为了达到我们自己想要的效果需要自定义一下,包括自定义显示的位置,显示的内容以及完全自定义里面的布局,代码如下: activity: pack ...
.jar是什么文件？(转载)
JAR(Java ARchive,Java 归档)是一种与平台无关的文件格式,可将多个文件合成一个文件.用户可将多个 Java applet 及其所需组件(.class 文件.图像和声音)绑定到 JA ...
ABAP程序的效率(转)
在网上看到的一篇文章: 程序的效率是每个程序员都应该重视的,无论您是采用哪一种语言进行开发. 程序有时候越短,并不一定越快,有时候程序很多代码,但不一定会很慢. 性能是一把双刃剑, 获得时间效率的同时 ...
[Redux] Using mapDispatchToProps() Shorthand Notation
We will learn how to avoid the boilerplate code in mapDispatchToProps() for the common case where ac ...
tuple类型的单词查询例子
17.3 重写前面的TextQuery程序,使用tuple代替QueryResult类. TextQuery.h #ifndef TEXTQUERY_H #define TEXTQUERY_H #in ...
安装Oracle数据库和PLSQL连接数据库
首先在Oracle官网上下载: 安装前要注意:将win64_11gR2_database_2of2中的\win64_11gR2_database_2of2\database\stage\Compone ...

GoJS研究，简单图表制作。

GoJS研究，简单图表制作。的更多相关文章

随机推荐

热门专题