交互式甘特图

时间:2012-04-12 19:03:42

标签: java javascript gantt-chart

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

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

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

  1. Javascript,HTML和CSS - 使用表格和背景颜色来格式化图表,这实际上是一种简单的方式。
  2. HTML5 Canvas和Javascript - 旧浏览器不支持,不支持DOM友好。
  3. Java applet - 不确定。
  4. SVG和Javascript - 以前没用过。
  5. 任何人都可以根据您的选择经验给我一些建议。谢谢!

1 个答案:

答案 0 :(得分:3)

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

正如您所说,旧版浏览器不支持Canvas,因此如果您需要支持它们,这将是一个问题。有旧的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 applet是个坏主意。这肯定会在很多移动环境中破裂,并且会在其他环境中慢慢运行。小程序非常不受欢迎,因为它们占用了过多的处理资源,而且它们之间以及它们所在页面的其余部分之间经常会有一个尴尬的用户界面断开连接。

类似的事情可以说是关于Flash和ActiveX。如果您要沿着这条路走下去,Flash可能是最安全的选择,而不是Java applet,但当然Flash不能在iOS设备上运行。

因此,有了上述所有内容,很明显,如果您想要一个完全跨浏览器和跨平台的完全干净的解决方案,那么您需要使用纯JS,HTML和CSS。这不是它听起来的负担,特别是对于像甘特图这样的图表,其中一切都是水平和垂直的线条和方框。你甚至不需要为它使用HTML表 - 实际上,我强烈建议不要使用表,因为它们会引入跨浏览器的怪癖。 <div>元素,仔细定位和布局,就可以了。

无论你使用什么,如果你想让它具有交互性,我强烈建议使用jQuery来处理点击和拖动,移动和调整大小。它可以在纯JS中完成,它可以很好地工作,但是它有很多工作,jQuery使它变得更容易。

希望有所帮助。