淘先锋技术网

首页 1 2 3 4 5 6 7

GoJS是一个功能强大的JavaScript图表库,支持各种流程图、组织图、UML图等常见图表。使用GoJS可以快速地构建交互式图表,而且GoJS的图表效果非常好看,也非常易于定制。

GoJS支持从JSON数据中加载图表,这样我们可以将图表的数据存储在JSON中,从而实现数据与图表的分离。下面是一个简单的例子,展示了如何使用GoJS加载JSON数据。

// 定义一个JSON数据
const diagramData = {
nodes: [
{id: 1, label: "开始"},
{id: 2, label: "流程1"},
{id: 3, label: "流程2"},
{id: 4, label: "结束"}
],
links: [
{from: 1, to: 2},
{from: 2, to: 3},
{from: 3, to: 4}
]
};
// 创建GoJS图表
const myDiagram = GoJS(go.Diagram, "myDiagramDiv");
// 定义一个模板用于渲染节点
myDiagram.nodeTemplate =
GoJS(go.Node, "Auto",
GoJS(go.Shape, "RoundedRectangle"),
GoJS(go.TextBlock, {margin: 5}, new go.Binding("text", "label")));
// 定义一个模板用于渲染链接
myDiagram.linkTemplate =
GoJS(go.Link,
GoJS(go.Shape),
GoJS(go.Shape, {toArrow: "Standard"}),
GoJS(go.TextBlock, {segmentOffset: new go.Point(0, -10)},
new go.Binding("text", "", function(data) {
return "Link " + data.from + " to " + data.to;
})));
// 设置GoJS图表的数据源为刚才定义的JSON数据
myDiagram.model = GoJS(go.GraphLinksModel,
{nodeDataArray: diagramData.nodes, linkDataArray: diagramData.links});
// 渲染图表
myDiagram.initialLayout();

上面的例子中,我们首先定义了一个包含节点和链接信息的JSON数据,然后通过GoJS内置的模板来渲染节点和链接。最后,我们将刚才定义的JSON数据设置为GoJS图表的数据源,并渲染出整个图表。

这个例子只是GoJS加载JSON数据的一个简单示例,实际上GoJS支持更加复杂的JSON结构和更多的定制化设置。如需了解更多关于GoJS的内容,请访问GoJS官网。