是否有用于在Javascript / CSS中呈现基本流程图的库？ [英] Is there a library for rendering basic flow diagrams in Javascript/CSS?

问题描述

在网页上，我想动态呈现非常基本的流程图，即几行按行连接。理想情况下，用户可以点击其中一个框（ DIVs ？）并转到另一个页面。诉诸Flash似乎有点矫枉过正。是否有人知道任何客户端（即服务器不可知）Javascript或 CSS库/技术可能有助于实现此目的？

On a web page I want to dynamically render very basic flow diagrams, i.e. a few boxes joined by lines. Ideally the user could then click on one of these boxes (DIVs?) and be taken to a different page. Resorting to Flash seems like an overkill. Is anyone aware of any client-side (i.e. server agnostic) Javascript or CSS library/technique that may help achieve this?

推荐答案

我发现最好最简单的是 js-graph.it 。

The best and simplest I found is js-graph.it.

它还有这个有用的功能：决定流程的方向。例如，在我的情况下，我有一个文档工作流程，所以我需要它流向右侧。

It has also this useful feature: deciding the orientation of the flow. For example, in my case I have a document workflow, so I need it to flow towards the right side.

更简单的替代方案是 wz_jsGraphics 。在我的情况下，我画这样的箭头：

An even simpler alternative is wz_jsGraphics. In my case I draw the arrows like this:

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

这篇关于是否有用于在Javascript / CSS中呈现基本流程图的库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！