首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >是否有用于在Javascript/CSS中呈现基本流程图的库?

是否有用于在Javascript/CSS中呈现基本流程图的库?
EN

Stack Overflow用户
提问于 2018-07-23 07:30:53
回答 2查看 0关注 0票数 0

在网页上,我想动态地呈现非常基本的流程图,即由行连接的几个框。理想情况下,用户可以单击其中一个框(div?),然后转到另一个页面。是否有人知道任何客户端(即服务器不可知)Javascript或CSS库/技术,可能有助于实现这一目标?

EN

回答 2

Stack Overflow用户

发布于 2018-07-23 16:11:39

我发现最好也最简单的就是JS-Graph.it: http://js-graph-it.sourceforge.net/

它还具有以下有用的特点:确定流向 http://js-graph-it.sourceforge.net/gettingstarted_8.html

例如,在我的例子中,我有一个文档工作流,我需要它流向右侧。

一个更简单的选择是Wz_jsGraphics: http://www.graphviz.org/ 在我的例子中,我画这样的箭头:

代码语言:txt
复制
/**Draw an arrow made of 3 lines. 
 * Requires wz_jsGraphics (http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm).
 * @canvas a jsGraphics object used as canvas
 * @blockFrom id of the object from which the arrow starts
 * @blockTo id of the object where the arrow ends with a arrowhead 
 */
function drawArrow(canvas, blockFrom, blockTo){

    //blocks
    var f = $("#" + blockFrom);
    var t = $("#" + blockTo);

    //lines positions and measures
    var p1 = { left: f.position().left + f.outerWidth(),    top: f.position().top + f.outerHeight()/2 };
    var p4 = { left: t.position().left,                     top: t.position().top + t.outerHeight()/2 };
    var mediumX = Math.abs(p4.left - p1.left)/2;
    var p2 = { left: p1.left + mediumX,                 top: p1.top };
    var p3 = { left: p1.left + mediumX,                 top: p4.top };

    //line A
    canvas.drawLine(p1.left, p1.top,    p2.left, p2.top);
    //line B
    canvas.drawLine(p2.left, p2.top,    p3.left, p3.top);
    //line C
    canvas.drawLine(p3.left, p3.top,    p4.left, p4.top);
    //arrowhead
    canvas.drawLine(p4.left - 7, p4.top - 4,        p4.left, p4.top);
    canvas.drawLine(p4.left - 7, p4.top + 4,        p4.left, p4.top);
}

var jg = new jsGraphics('myCanvasDiv');
drawArrow(jg, 'myFirstBlock', 'mySecondBlock');
jg.paint(); 
票数 0
EN

Stack Overflow用户

发布于 2018-07-23 16:53:19

呈现必须是客户端吗?

如果是,你可以尝试处理:

http:/ejohn.org/blog/processingjs/

如果你可以在服务器端这样做,那么Graphviz是一个很好的选择。

http:/www.Graphviz.org/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/-100000390

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档