如何使用canvas元素显示图表

Question

在学习图算法和HTML的canvas元素时，我突然想到我应该自己写一个小的图形库，用JavaScript来显示图形，使用canvas元素。你能给我一些建议，让我可以看看一些代码（无论是JavaScript还是Python），了解如何显示这些图形，并写出我自己的小库吗？

PS：我指的是边和节点的图，而不是柱状图和饼图。

Answer 1

这个库真不错，适合在画布上做图形处理：processing.js：http://processingjs.org/。这是一个图形库，让你可以用简单的JavaScript代码创建出很棒的可视化效果。快去看看吧。

Answer 2

其实并不是在用canvas，不过有一个很不错的JavaScript解决方案可以用来画图：Raphael图表插件

Raphael的好处是它在所有浏览器上都能正常工作，包括IE浏览器。

Answer 3

有很多方法可以用不同的布局算法来展示图形。主要有两种算法：一种是“力导向布局算法”，它是一种持续的布局算法，利用推拉的原理来调整图形的位置。另一种是GEM布局算法，它用一种简单的物理方法来找出最佳的“适合”方式。

下面是一些例子：

http://vis.stanford.edu/protovis/ex/force.html

bitbucket.org/bwalenz/algorithms/src/

Protovis可能是功能最强大的工具。而bitbucket的链接是GEM算法的一个实现，但没有可视化效果。它只是简单地排列了节点和边。