[英]Display diagram in mxGraph with the help of xml
圖表(帶有 xml)與我在 mxGraph 工具的幫助下創建的圖表不完全相同,我正在使用以下代碼創建圖表:
我使用 mxGraph 工具創建了如下圖表:
到目前為止,我將 xml 保存在 localstorage 中,並且從 xml 我執行了以下代碼以在我的一個 div 容器中顯示圖表,如下所示:
let xml = '<mxGraphModel dx="963" dy="318" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100"><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="" style="shape=mxgraph.basic.t2;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#000000;strokeWidth=2" vertex="1" parent="1"><mxGeometry x="30" y="30" width="79" height="267" as="geometry"/></mxCell><mxCell id="3" value="Actor" style="shape=umlActor;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;html=1;outlineConnect=0;" vertex="1" parent="1"><mxGeometry x="470" y="80" width="140" height="120" as="geometry"/></mxCell><mxCell id="4" value="" style="shape=internalStorage;whiteSpace=wrap;html=1;backgroundOutline=1;" vertex="1" parent="1"><mxGeometry x="300" y="40" width="80" height="80" as="geometry"/></mxCell><mxCell id="5" value="" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="220" y="230" width="120" height="80" as="geometry"/></mxCell></root></mxGraphModel>';
let doc = mxUtils.parseXml(xml);
let codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
let elt = doc.documentElement.firstChild;
let cells = [];
while (elt != null)
{
let cell = codec.decode(elt)
if(cell != undefined){
if(cell.id != undefined && cell.parent != undefined && (cell.id == cell.parent)){
elt = elt.nextSibling;
continue;
}
cells.push(cell);
}
elt = elt.nextSibling;
}
graph.addCells(cells);
下面的輸出是從上面的代碼中生成的:
所以問題是我想顯示與我創建的完全相同的圖表,但它只顯示對象的形狀。
核心 mxGraph 庫不理解 3 個不正確形狀的形狀樣式。 這些是在GraphEditor的圖中定義的。 例如,請參閱umlActor 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.