翻譯|使用教程|編輯:王香|2019-01-17 10:10:57.000|閱讀 661 次
概述:GoJS是一個用于實現交互式圖表的JavaScript庫。本頁面將向您展示使用GoJS的基本要素。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
GoJS是一個用于實現交互式圖表的JavaScript庫。本頁面將向您展示使用GoJS的基本要素。
因為GoJS是一個依賴于HTML5功能的JavaScript庫,所以您需要確保您的頁面聲明它是HTML5文檔。當然,您需要加載庫:
<!DOCTYPE html> <!-- HTML5 document type --> <html> <head> <!-- use go-debug.js when developing and go.js when deploying --> <script src="go-debug.js"></script> . . .
直接鏈接到GoJS library
<script src="//cdnjs.cloudflare.com/ajax/libs/gojs/1.8.36/go-debug.js"></script>
每個GoJS圖都包含在<div>HTML頁面中的HTML 元素中,您可以給出明確的大小:
<!-- The DIV for a Diagram needs an explicit size or else we will not see anything. In this case we also add a background color so we can see that area. --> <div id="myDiagramDiv" style="width:400px; height:150px; background-color: #DAE4E4;"></div>
在JavaScript代碼您傳遞< div >的id制作圖表時:
var $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv");
創建了一個空圖:
請注意,這go是所有GoJS類型所在的“命名空間” 。GoJS類的所有代碼使用,例如Diagram或Node或Panel或Shape或TextBlock都將以“ go.” 為前綴。 本文將通過示例向您展示如何使用它go.GraphObject.make來構建GoJS對象。有關更多詳細信息,請閱讀GoJS中的構建對象。使用$作為縮寫go.GraphObject.make 非常方便我們將從現在開始使用它。如果你使用$的其他代碼中的東西,你總是可以選擇一個不同的短變量名稱,如$$或MAKE或GO。
圖的節點和鏈接是由模型管理的數據的可視化。 GoJS有一個模型 - 視圖架構,其中Models包含描述節點和鏈接的數據(JavaScript對象的數組),Diagrams充當視圖,使用實際的Node和Link對象可視化這些數據。模型,而不是圖表,是您加載然后在編輯后保存的內容。您可以在模型中的數據對象上添加應用程序所需的任何屬性; 您不添加屬性或修改Diagram和GraphObject類的原型。
這是一個模型和圖表的示例,后面是它生成的實際圖表:
var $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv", { "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo }); var myModel = $(go.Model); // in the model data, each node is represented by a JavaScript object: myModel.nodeDataArray = [ { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" } ]; myDiagram.model = myModel;
該圖顯示了模型中的三個節點。一些互動已經成為可能:
購買GoJS正版授權,請點擊“”喲!
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn