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,设置图表长.高.代码如 ...
随机推荐
- MSW下wxWidgets的安装与编译
教程摘自网上各大博客.贴吧.论坛,结合自己的实践做了一些实质性的修改. 一.安装 首先从http://sourceforge.net/projects/wxwindows/files/2.8.12/w ...
- php 修改上传文件大小
有些朋友要通过自己的网站后台,包括论坛,来上传一些文件,php一般为2m,或8m(以下我们按默认为2m),接下来就是来讲怎么修改上传文件大小的. 1.首先修改执行上传文件限制 一般的文件上传,除非文件 ...
- hdoj 2767 Proving Equivalences【求scc&&缩点】【求最少添加多少条边使这个图成为一个scc】
Proving Equivalences Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- HTML5 简单画图,切片,变形
本人是在校学生,由于这段时间不知道怎么回事,心情比较无聊没有事干,所以利用这段时间学一下HTML5,发博客的目的是为了以后可以查询,也希望各位大神能够指导像我们这样的菜鸟,告别菜鸟的时段 我学东西时候 ...
- Eclipse中SVN的安装步骤（两种）和使用方法[转载]
一.给Eclipse安装SVN,最常见的有两种方式:手动方式和使用安装向导方式.具体步骤如下: 方式一:手动安装 1.从官网下载site-1.6.9.zip文件,网址是:subclipse.tigri ...
- GA遗传算法解析
LinJM @HQU 谈及遗传算法,我首先想到的就是孟德尔的豌豆实验.当然,遗传算法实质上并不能用豌豆实验说明,豌豆实验探讨了分离定律和自由组合定律,而遗传算法所借鉴的并不是这两个定律.遗传算法,简 ...
- mysql wait_timeout和interactive_timeout总结
(1)interactive_timeout:参数含义:服务器关闭交互式连接前等待活动的秒数.交互式客户端定义为在mysql_real_connect()中使用CLIENT_INTERACTIVE ...
- 2014年最新720多套Android源码2.0GB免费一次性打包下载
之前发过一个帖子,但是那个帖子有点问题我就重新发一个吧,下面的源码是我从今年3月份开始不断整理源码区和其他网站上的android源码,目前总共有720套左右,根据实现的功能被我分成了100多个类,总共 ...
- JavaScript 应用开发 #5：为完成的任务添加样式
判断一下任务的状态,如果是完成的任务,可以在任务项目的上面,添加一个额外的 css 类,在这个 css 类里,可以去定义完成的任务的样式.比如,把文字的颜色变成浅友色,并且在文字上面添加一条删除线.这 ...
- C# 序列化和反序列
1.对象序列化的介绍 (1).NET支持对象序列化的几种方式 二进制序列化:对象序列化之后是二进制形式的,通过BinaryFormatter类来实现的,这个类位于System.Runtime.Seri ...