Go.js去水印、官方图表案例理解
Go.js去水印、官方图表案例理解
GoJS是一个功能丰富的JavaScript库，用于在现代web浏览器和平台上实现定制交互式图表和复杂可视化。GoJS通过可定制的模板和布局，构建复杂节点、链接和组的JavaScript图。
效果点击可查看效果
GO.js 官方文档 链接
去水印功能可参考，官方案例只是在代码注释中添加了个人见解
去水印 – 搜索找到 7eba17a4ca3b1a8346
// a.fw = d[D.Vg("7eba17a4ca3b1a8346")][D.Vg("78a118b7")](d, D.Qm, 4, 4);
a.fw = function() {};
找到7eba17a4ca3b1a8346将空函数赋值给变量
图表案例说明
- 在html中必须显式的声明dom节点并指定大小 和canvas很像
- goExample.js
// go.js 案例
require("../lib/js/go-debug.js");
var $go = go.GraphObject.make;
var myDiagram =
$go(go.Diagram, "myDiagramDiv", { // 绑定DOM元素
"undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
});
// define a TreeLayout that flows from top to bottom
myDiagram.layout =
$go(go.TreeLayout, {
angle: 90, // 树形布局排列方式，从左到右，从上到下，从右到左，从下到上 分别为 0，90，180，270
layerSpacing: 40 // 每层间距 px
});
// define a simple Node template
myDiagram.nodeTemplate =
$go(go.Node, "Horizontal", //定义node的放置方式 水平、垂直 Horizontal Vertical
// the entire node will have a light-blue background
{
background: "#44CCFF"
},
$go(go.Picture, // 图片的节点
// Pictures should normally have an explicit width and height.
// This picture has a red background, only visible when there is no source set
// or when the image is partially transparent.
{
margin: 10,
width: 50,
height: 50,
background: "red"
},
// Picture.source is data bound to the "source" attribute of the model data
new go.Binding("source")),
// 绑定并数据 等同于 new go.Binding("source","picName")) 第一个参数是go.Picture图片节点的属性相当于(href,picAddr) , 如果该属性名和model.nodeDataArray中的属性名相同，则省略第二个参数
$go(go.TextBlock,
"Default Text", // the initial value for TextBlock.text
// some room around the text, a larger font, and a white stroke:
{
margin: 12,
stroke: "white",
font: "bold 16px sans-serif"
},
// TextBlock.text is data bound to the "name" attribute of the model data
new go.Binding("text", "name"))
);
// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
$go(go.Link,
// default routing is go.Link.Normal
// default corner is 0
{
routing: go.Link.Orthogonal, // 指定路线为直角类型
corner: 5 // 圆角度为 5
},
$go(go.Shape, {
strokeWidth: 3,
stroke: "#555"
}), // the link shape
// if we wanted an arrowhead we would also add another Shape with toArrow defined:
$go(go.Shape, { toArrow: "Standard", stroke: "red" }) // 指定箭头样式
);
// var model = $go(go.GraphLinksModel); // 支持链接关系，为每个链接使用单独的链路数据对象
var model = $go(go.TreeModel); // 只支持形成树形结构图的链接关系
model.nodeDataArray = [ // note that each node data object holds whatever properties it needs;
// for this app we add the "name" and "source" properties
{
key: "1",
name: "Don Meow",
source: "../src/image/cat1.png"
},
{
key: "2",
parent: "1",
name: "Demeter",
source: "../src/image/cat2.png"
},
{
key: "3",
parent: "1",
name: "Copricat",
source: "../src/image/cat3.png"
},
{
key: "4",
parent: "3",
name: "Jellylorum",
source: "../src/image/cat4.png"
},
{
key: "5",
parent: "3",
name: "Alonzo",
source: "../src/image/cat5.png"
},
{
key: "6",
parent: "2",
name: "Munkustrap",
source: "../src/image/cat6.png"
}
];
myDiagram.model = model;
因为需求和go给出的案例相似最近也一直在看go，后面会继续把自己遇到的坑填上。
有关拖动电路元件，电路图连线等智能化电路仿真功能
加油鸭。