7

我正在寻找一种在 HTML 中呈现图形的方法，仅使用 mxGraph Javascript，而不使用 SVG 画布。用户手册说：

mxGraph 还包括完全使用 html 呈现的功能，这限制了可用功能的范围，但适用于更简单的图表。”

但是，我尝试了以下但没有成功：

var editor = new mxEditor();
var graph = new mxGraph(graphContElem, new mxGraphModel(), 'fastest'); // fastest maps to stricthtml
graph.setHtmlLabels(true);
graph.dialect = mxConstants.DIALECT_STRICTHTML;
editor.graph = graph;
editor.createGraph();

添加此单元格：

var prototype = new mxCell('<input type="text" value="test" />', new mxGeometry(0, 0, w, h), style);
prototype.setVertex(true);
... import cells ...

导致：

<svg style="width: 100%; height: 100%; display: block; min-width: 1px; min-height: 1px;">
...
    <g transform="translate(104,61)">
        <foreignObject style="overflow:visible;" pointer-events="all" width="173" height="19">
            <div style="display:inline-block;font-size:11px;font-family:Arial,Helvetica;color:#774400;line-height:1.2;vertical-align:top;white-space:nowrap;text-align:center;">
                <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">
                    <input type="text" value="test">
                </div>
            </div>
        </foreignObject>
    </g>
    ...
</svg>

我的目标是开发一个表单编辑器；因此，图表的单元格将是 HTML 小部件或 Web 组件，例如输入字段。

mxGraph 可以吗？提前致谢！

4

1 回答 1

1

文档需要更新，mxGraph 已经很久不支持这种模式了。

于 2016-09-07T09:51:25.097 回答