javascript - 在浏览器中生成图形图表的最佳方法是什么？

Question

我启动了一个新的开源项目，旨在提供优质的项目管理体验。为此，我需要访问一组图表工具(Flash 不可用)，特别是包含甘特图的工具。我做了功课并在网上购物，我或多或少得出这样的结论:我想要的东西并不存在，至少不是免费的。所以我很可能不得不从头开始写这个。

如果我要创建一个人们可以与之交互的甘特图(我假设这意味着拥有出色的 DOM 支持)，那么我会使用什么技术？我应该选择 SVG 吗？还是 HTML5 Canvas ？还有别的事吗？非常感谢您的建议。

此外，一个要求是我使用的任何库都需要得到社区的积极支持(即没有死项目)。

Answer 1

我认为不会有很多免费选项，因为这是一个利基需求。

JS 选项:

• http://www.jsgantt.com/
• http://code.google.com/p/flot/

有前途的 Perl 模块:

• http://cpansearch.perl.org/src/DARNOLD/DBD-Chart-0.82/dbdchart.html
• http://search.cpan.org/~awestholm/Project-Gantt-1.03/Gantt.pm

---

更新:

过去几年，交互式/网络图表方面取得了惊人的进步。在提出您的问题之前不久，D3.js创建后，它已成为普遍接受的库，它使用 SVG 来实现可视化。这是 basic example和一个more advanced使用D3实现。笔记;甘特图仍处于起步阶段； D3 将来很可能会重新审视它。

Canvas 与 SVG 的争论已经被考虑过很多次了。您应该阅读 Microsoft 的这篇文章； How to Choose Between Canvas and SVG for your Site 。基本上，如果您需要显示很多元素，Canvas 的性能会更好。如果优先考虑可访问性，SVG 会更好。

就使用 Canvas 与 SVG 而言，canvas 感觉更流畅，并且它肯定更适合 WebGL，但 SVG 更易于移植。他们各有各的优点。