互動甘特圖

Question

我一直使用jfreechart來創建甘特圖，甚至設法增加里程碑。我也能夠在網頁上動態顯示這些圖表。

但現在我想添加更多的互動圖表，所以我需要某種客戶端的東西。我檢查了jsgantt，它在一般情況下工作正常，我試圖擴展它以適應我自己的要求。我放棄了，因爲代碼中存在HTML CSS樣式，這使得它很難遵循 - 作者聲稱這是爲了更好的跨瀏覽器支持，但跨瀏覽器行爲仍然是一個問題：樹的文本沒有在Firefox上正確對齊圖表本身。

我現在想從底層開始做，但不知道從哪裏開始。似乎有幾個選擇在這裏：

1. Javascript，HTML和CSS - 使用表格和背景顏色來格式化圖表，這實際上是jsgantt的方式。
2. HTML5 Canvas和Javascript - 舊版瀏覽器不支持而且不支持DOM。
3. Java applet - 不確定。
4. SVG和Javascript - 從未工作過。

任何人都可以給我一些關於您選擇的經驗。謝謝！

Answer 1

首先，問問你自己需要支持哪些瀏覽器和/或平臺，因爲問題的答案將決定你走哪條路線。

正如您所說，Canvas在舊版瀏覽器中不受支持，所以如果您需要支持Canvas，將會出現問題。有些polyfill黑客可以爲舊版本的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使它更容易。

希望有所幫助。