建立動態圖表的最佳網絡技術

Question

我需要建立一個自定義設計的條形圖來顯示一些簡單的數據。以下是我的要求。任何人都可以爲我的要求提供最好的網絡技術。

• 高瀏覽器兼容性
• 繪製形狀
• 能力填充形狀與漸變
• 具有的onclick和能力能力不同的形狀（圖中柱）的onmouseover事件。

謝謝你們。我正在考慮使用SVG，但尋找建議。

Answer 1

Raphaël - 它是SVG/VML。 它說：

瀏覽器兼容性：

拉斐爾目前支持Firefox 3.0+ ，Safari 3.0以上，歌劇9.5+和Internet Explorer 6.0及以上版本。

能力繪製形狀

圓形，矩形，橢圓形，圖像，文本，路徑

能夠填充形狀與漸變

是

能力有onclick和onmouseover事件

是：

... ...每一個圖形對象，您 創建也是一個DOM對象，所以你 可以附加JavaScript事件處理程序 或更高版本修改。

一切都在reference

最重要的是，有一個叫gRaphael插件，使圖表更容易的創建。

Answer 2

簡單數據 - Google Charts API或Google Visualization API可能適合您。

詳細圖像圖表的所有功能可以在Chart feature list

找到您也可以看看的圖表API和可視化的API comparison。

Answer 3

另一個候選人當然是JQuery SVG - 如果你已經熟悉jquery，你可能更喜歡這個。

有對SO JQuery的SVG和拉斐爾的比較：使用Adobe Flex jQuery SVG vs. Raphael

Answer 4

我推薦。下面是多麼容易餅圖創建可以在Flex的一個例子：

<mx:Panel title="Pie Chart"> 
<mx:PieChart id="myChart" 
    dataProvider="{expenses}" 
    showDataTips="true" 
> 
    <mx:series> 
     <mx:PieSeries 
      field="Amount" 
      nameField="Expense" 
      labelPosition="callout" 
     /> 
    </mx:series> 
</mx:PieChart> 
<mx:Legend dataProvider="{myChart}"/> 

根據您的標準：

• 高的瀏覽器兼容性：Flex是在超過95％的人使用所有瀏覽器中的所有瀏覽器和行爲都相同。不再需要檢查您的Web應用程序是否在ie，firefox，chrome等中運行...因爲任何具有Flash播放器的瀏覽器都是兼容的。
• 繪製形狀的能力：Flash最大的優勢就是繪製能力。圖表是完全可定製的，可換膚以實現您所需的外觀。
• 能夠用漸變填充形狀 - 通過設置樣式屬性或自定義外觀很容易完成。
• 能夠針對不同形狀進行onclick和onmouseover事件 - 請參閱this link，瞭解如何使用圖表創建用戶交互的一些簡單方法。

Answer 5

嗨，我希望這個鏈接可以幫助你，我發現它，而尋找類似的解決方案是什麼，你正在尋找：

http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart

我試圖gRaphael，我有儘管找到文檔仍然很困難。你必須閱讀代碼並使用爆炸代替min.js

Answer 6

我想分享jquery.jqplot.js。它有很多jQuery選項，但依賴於其他插件，如syntaxhighliter等。