Отображение диаграммы в mxGraph с помощью xml

#javascript #angular #mxgraph

#javascript #angular #mxgraph

Вопрос:

Диаграмма (с 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 amp;amp; cell.parent != undefined amp;amp; (cell.id == cell.parent)){
            elt = elt.nextSibling;
            continue;
        }
        cells.push(cell);
    }
    elt = elt.nextSibling;
}
graph.addCells(cells);

  

Приведенный ниже вывод создается из приведенного выше кода:

введите описание изображения здесь

Итак, проблема в том, что я хочу отобразить точно такую же диаграмму, которую я создал, но она показывает только формы объектов.

Ответ №1:

Основная библиотека mxGraph не понимает стиль формы для трех неправильных фигур. Они определены на графике для GraphEditor. Например, смотрите umlActor.

Комментарии:

1. Спасибо @ thomas за ответ, да, верно, но если я хочу создать эти фигуры, то как мы можем этого достичь? любое решение или я должен использовать какой-то другой инструмент для этого?