如何使用 javascript 绘制图表？答案

【问题标题】：How can I use javascript to draw diagrams?如何使用 javascript 绘制图表？
【发布时间】：2011-09-21 10:31:51
【问题描述】：

我是 JavaScript 领域的新手，我还没有找到一个好的框架来用 JavaScript 绘制图表。这是一个学校项目，所以我没有多少时间去开发，但我愿意学习很多东西嘿嘿嘿。基本上我想做的是做一个简单的工作流网络编辑器；（你可以在下面看到我的模型）我想做这样的东西http://www.diagram.ly/，显然，不是那么复杂。

我在整个界面中使用 primefaces，但我不知道如何在画布中绘制东西，我认为 JQuery 会做，甚至 Mootools，但我不确定，你知道任何好的 JavaScript 框架吗？画图（基本的数字和连接器就可以了）？

我做了一些研究，发现了这个：ui.ajax.org/#demos/elements.flowchart，你认为我可以让它与 JSF 一起工作吗？

【问题讨论】：

图表链接不完整
您是否尝试将 ui.ajax.org/#demos/elements.flowchart 与 JSF 集成？

标签： javascript ajax jsf-2 primefaces

【解决方案1】：

我建议你看看Raphael

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

【讨论】：

谢谢，看来是个很强大的库，我试试。 =D

【解决方案2】：

您可能想了解 HTML5 画布，它有一些很酷的功能，您可以利用它们来绘制东西。

【讨论】：

【解决方案3】：

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

第一个 sn-p 将定义流程图中的六个项目，包括开始和结束的圆圈。

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...

第二个 sn-p 定义了项目之间的连接。

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

【讨论】：

【解决方案4】：

您可能想查看 processing.js：http://processingjs.org/

【讨论】：

【解决方案5】：

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

【讨论】：