如何使用javascript绘制图表?

时间:2011-06-23 17:29:36

标签: javascript ajax jsf-2 primefaces

我是JavaScript世界的新手,我还没有找到一个用JavaScript绘制图表的好框架。这是一个学校项目,所以我没有多少时间来发展,但我愿意学到很多呵呵。基本上我想做的是制作一个简单的工作流网页编辑器; (你可以在下面看到我的模型)并且我想制作类似这样的东西http://www.diagram.ly/,显然,不是那么复杂。

我正在使用primefaces作为整体界面,但我不知道如何在画布中画画,我认为JQuery会做,甚至Mootools,但我只是不确定,你知道任何好的JavaScript框架吗?绘制图表(基本数字和连接器都可以)?

我做了一些研究,发现了这个:ui.ajax.org/#demos/elements.flowchart,你认为我可以让它与JSF合作吗?

enter image description here

5 个答案:

答案 0 :(得分:4)

我建议您查看Raphael

我没有经常使用它,但它看起来非常强大,文档也不错。将事件处理程序附加到绘制的对象非常容易,这听起来像你需要做很多事情。

答案 1 :(得分:2)

您可能想了解HTML5游戏,它有一些很酷的功能,您可以利用它们来绘制内容。

答案 2 :(得分:2)

Flowchart.js库可以帮助制作一些基本的流程图。

此第一个代码段将定义流程图中的六个项目,包括起始和结束圆圈。

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

第二个片段定义了项目之间的联系。

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

答案 3 :(得分:0)

您可能需要查看processing.js:http://processingjs.org/

答案 4 :(得分:0)

使用graphiti提供您想要的确切内容