翻譯|使用教程|編輯:吳園園|2020-05-12 11:52:28.983|閱讀 1325 次
概述:有時可能需要調整包含GoJS圖表的div的大小。GoJS不會監聽或嘗試檢測div大小的變化,因此在執行調整其包含div大小的操作時,必須手動告訴每個圖表。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
GoJS是一款功能強大,快速且輕量級的流程圖控件,可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖,且極大地簡化您的JavaScript / Canvas 程序。
使用Diagram.requestUpdate調整Div的大小
以下示例具有一個按鈕,該按鈕可放大圖的div。單擊時,將明顯調整div的大小,但圖保持不變。
// A minimal Diagram
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 3 }, // some room around the text
new go.Binding("text", "key"))
);
diagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
// Resize the diagram with this button
var button1 = document.getElementById('button1');
button1.addEventListener('click', function() {
var div = diagram.div;
div.style.width = '200px';
});
通常,我們會希望在div調整大小的同時,將Diagram調整為其div的大小。為此,我們在調整div的大小后向Diagram.requestUpdate 添加了一個調用。這將檢查圖的div是否已更改大小,如果已更改,則以適當的新尺寸重新繪制圖。
除了添加了對Diagram.requestUpdate的調用之外,以下代碼幾乎相同。
// A minimal Diagram
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 3 }, // some room around the text
new go.Binding("text", "key"))
);
diagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
// Resize the diagram with this button
var button2 = document.getElementById('button2');
button2.addEventListener('click', function() {
var div = diagram.div;
div.style.width = '200px';
diagram.requestUpdate(); // Needed!
});
====================================================
想要購買GoJS正版授權的朋友可以
有關產品的最新消息和最新資訊,歡迎掃描關注下方微信公眾號
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自: