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官網。
上一篇html微信聊天代碼大全
下一篇python 排隊進程