Flowchart.js SVG 渲染在弹出窗口中搞砸了
Posted
技术标签:
【中文标题】Flowchart.js SVG 渲染在弹出窗口中搞砸了【英文标题】：Flowchart.js SVG rendering messed up in popup 【发布时间】：2018-08-10 13:28:29 【问题描述】：我正在使用flowchart.js 库来获取流程图的 SVG 渲染。 我需要在带有动态引导面板的弹出窗口中包含流程图渲染，但结果很混乱（框上的标签和小渲染：
我的代码是：
<div class="panel panel-default">
<div class="panel-body">
<div id="diagram"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function ()
var diagram = flowchart.parse('st=>start: Start:>http://www.google.com[blank]\n' +
'e=>end:>http://www.google.com\n' +
'op1=>operation: My Operation\n' +
'op2=>operation: Stuff|current\n' +
'sub1=>subroutine: My Subroutine\n' +
'cond=>condition: Yes \n' + // use cond(align-next=no) to disable vertical align of symbols below
'or No?\n:>http://www.google.com\n' +
'c2=>condition: Good idea|rejected\n' +
'io=>inputoutput: catch something...|request\n' +
'\n' +
'st->op1(right)->cond\n' +
'cond(yes, right)->c2\n' + // conditions can also be redirected like cond(yes, bottom) or cond(yes, right)
'cond(no)->sub1(left)->op1\n' + // the other symbols too...
'c2(true)->io->e\n' +
'c2(false)->op2->e' //allow for true and false in conditionals
);
diagram.drawSVG('diagram');
);
</script>
如何处理？
非常感谢
【问题讨论】：
【参考方案1】：这段代码运行良好：
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.8.0/flowchart.min.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-body">
<div id="diagram"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function ()
var diagram = flowchart.parse('st=>start: Start:>http://www.google.com[blank]\n' +
'e=>end:>http://www.google.com\n' +
'op1=>operation: My Operation\n' +
'op2=>operation: Stuff|current\n' +
'sub1=>subroutine: My Subroutine\n' +
'cond=>condition: Yes \n' + // use cond(align-next=no) to disable vertical align of symbols below
'or No?\n:>http://www.google.com\n' +
'c2=>condition: Good idea|rejected\n' +
'io=>inputoutput: catch something...|request\n' +
'\n' +
'st->op1(right)->cond\n' +
'cond(yes, right)->c2\n' + // conditions can also be redirected like cond(yes, bottom) or cond(yes, right)
'cond(no)->sub1(left)->op1\n' + // the other symbols too...
'c2(true)->io->e\n' +
'c2(false)->op2->e' //allow for true and false in conditionals
);
diagram.drawSVG('diagram');
);
</script>
</body>
</html>
输出：
也许您正在混合不兼容的版本，或者您的问题中缺少某些重要信息。
【讨论】：
以上是关于Flowchart.js SVG 渲染在弹出窗口中搞砸了的主要内容，如果未能解决你的问题，请参考以下文章