2016-05-09 17 views
4

SVGキャンバスを使用せずに、HTMLでグラフをレンダリングする方法を探しています(mxGraph JavaScriptのみを使用しています)。マニュアルは言う:MxGraph:SVGなしでHTMLでグラフを描画できますか?

mxGraphも、これが利用可能な機能の範囲を制限しますが、より簡単な図に適している、完全にHTMLを使用してレンダリングする機能が含まれています「

をしかし、私はしました。成功せず試してみました次:

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

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(); 

は、このセルを追加します

はこれにリード:

<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で可能ですか?前もって感謝します!

+1

ドキュメントは更新する必要がありますが、私たちはそのモードを長期間サポートしていません。 mxGraphは、あなたのユースケースのために大過剰です。 – David

+0

ありがとうございました!私はすでにBPMNエディタのプロジェクトでmxGraphを使用していますので、一貫性の理由からフォームエディタ用に使用することを考えました。しかし、その場合、私はそれ以外はやります。 –

+0

@Christianあなたのユースケース用のライブラリを見つけましたか?私は同様の問題の解決策を見出そうとしています。 – smikesh

答えて

0

ドキュメントを更新する必要があるため、mxGraphはそのモードを長時間サポートしていません。