在浏览器中生成图表图表的最佳方法是什么?

时间:2011-06-26 22:03:03

标签: javascript dom canvas svg charts

我已经开始了一个新的开源项目,旨在提供高质量的项目管理体验。要做到这一点,我需要访问一组图表工具(Flash不在桌面上),特别是包含甘特图的工具。我完成了我的家庭作业并在网上购物,我或多或少地得出结论,我想要的东西不存在,至少不是免费的。所以我很可能不得不从头开始写这篇文章。

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

此外,要求是我在社区中需要积极支持的任何图书馆(即没有死亡项目)。

2 个答案:

答案 0 :(得分:2)

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

JS选项:

有前途的Perl模块:


更新

在过去几年中,互动/网络图表方面取得了惊人的进步。在您提出问题之前不久,D3.js已创建,它已成为一个普遍接受的库,它使用SVG实现可视化。这是使用D3的{​​{3}}和basic example实现。注意;甘特图仍处于起步阶段; D3很可能在将来再次访问它。

Canvas与SVG的争论已被多次考虑过。你应该阅读微软的这篇文章; more advanced。基本上,如果你必须显示许多元素,Canvas会表现得更好。如果可访问性是一个优先事项,SVG会更好。

在使用Canvas vs SVG方面,画布感觉更流畅,而且使用WebGL肯定更有能力,但SVG更易于移植。他们都有自己的优点。

答案 1 :(得分:1)

如果您要自己制作,我会推荐使用SVG库Raphaël,它可以让您轻松地使用SVG绘制内容。制作鼠标事件处理程序和其他东西也很简单,您可以使用它来使其交互。

我没有太多使用canvas创建交互式图形的经验,但我的直觉是,由于您没有“元素”来添加事件侦听器,因此很难处理鼠标事件。