3

我一直在使用 jfreechart 创建甘特图,甚至设法为其添加了里程碑。我还可以在网页上动态显示这些图表。

但现在我想在图表中添加更多交互,所以我需要某种客户端的东西。我检查了 jsgantt,它一般工作正常,我尝试扩展它以满足我自己的要求。我放弃了它,因为代码中到处都有 HTML CSS 样式,这使得它难以理解——作者声称这是为了更好的跨浏览器支持,但跨浏览器行为仍然是一个问题:树的文本没有与 Firefox 上的图表本身正确对齐。

我现在正在考虑从头开始,但不知道从哪里开始。这里似乎有几种选择:

  1. Javascript、HTML 和 CSS - 使用表格和背景颜色来格式化图表,这实际上是 jsgantt 方式。
  2. HTML5 Canvas 和 Javascript - 旧浏览器不支持并且对 DOM 不友好。
  3. Java 小程序 - 不确定。
  4. SVG 和 Javascript - 以前从未工作过。

任何人都可以根据您的选择经验给我一些建议。谢谢!

4

1 回答 1

3

首先,问问自己你需要支持哪些浏览器和/或平台,因为这个问题的答案将决定你走哪条路。

正如您所说,旧浏览器不支持 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让它轻松了很多。

希望有帮助。

于 2012-04-12T19:32:20.407 回答