首先,问问自己你需要支持哪些浏览器和/或平台,因为这个问题的答案将决定你走哪条路。
正如您所说,旧浏览器不支持 Canvas,因此如果您需要支持它们,这将是一个问题。有一些 polyfill hack 可以为旧版本的 IE 添加画布支持,但速度很慢。
旧版本的 IE 也不支持 SVG。但是,在这种情况下,有一个很好的备用解决方案,因为 IE 从 IE5.5 开始就支持称为 VML 的替代矢量格式。几个 JS 库,例如优秀的Raphael,同时支持 SVG 和 VML,这取决于它们所运行的浏览器,允许您非常轻松地创建跨平台矢量图形。
鉴于上述情况,很明显 SVG(带有 VML 后备)是一个很好的选择。SVG 唯一的缺点是 Android v2.x 不支持它。v3 和 v4 确实支持它,但目前大多数 Android 设备仍在运行 v2.x。
所以暂时,如果您需要包括移动支持,请不要使用 SVG。然而,这种情况会迅速改变,我希望在一年后给出不同的建议。如果您不担心 Android 用户,那么我肯定会说现在就使用 SVG。
Java 小程序是个坏主意。这肯定会在很多移动环境中崩溃,并且会在其他环境中缓慢运行。小程序已经非常失宠,因为它们占用了过多的处理资源,并且在它们与它们所在页面的其余部分之间经常有一个尴尬的用户界面断开连接。
Flash 和 ActiveX 也有类似的说法。如果你打算走这条路,Flash 可能是最安全的选择,而不是 Java 小程序,但 Flash 当然不能在 iOS 设备上运行。
综上所述,很明显,如果你想要一个完全跨浏览器和跨平台的完全干净的解决方案,那么你需要使用纯 JS、HTML 和 CSS。这不是它听起来的负担,特别是对于像甘特图这样的图表,其中所有内容都是水平和垂直的线条和框。您甚至不需要为此使用 HTML 表格——事实上,我强烈建议不要使用表格,因为它们确实引入了跨浏览器的怪癖。只需将<div>
元素用于所有内容,并仔细定位和布局,就可以了。
无论你使用什么,如果你想让它具有交互性,我强烈建议使用 jQuery 来处理点击和拖动、移动和调整大小。可以用纯JS来做,也可以很好用,但是工作量很大,jQuery让它轻松了很多。
希望有帮助。