问题描述
在网页上,我想动态呈现非常基本的流程图,即几行按行连接。理想情况下,用户可以点击其中一个框( 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?
推荐答案
我发现最好最简单的是。
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.
更简单的替代方案是。在我的情况下,我画这样的箭头:
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中呈现基本流程图的库?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!