Pie，bar，line：SVG/VML優於Canvas

Question

我需要爲「標準」製圖選擇庫：餅圖，線條和條形圖。

從我讀過的內容看來，最好的格式是SVG/VML，比如Highcharts。在所有主流瀏覽器中，SVG已經成爲標準，現在IE 9接受它。重新縮放和導出比Canvas更容易。

不過，我看到幾個圖表庫依賴於Canvas。我錯過了什麼嗎？是否有任何理由考慮Canvas over SVG的這種應用程序？

Answer 1

一般情況下，您都可以獲得相同的結果。兩者最終都將像素繪製到用戶的屏幕上。的主要差別是HTML5畫布給出了結果你們像素級別的控制（讀，寫），而SVG是保留模式圖形API，使得它很容易處理的事件或操作JavaScript或SMIL作品動畫和所有重新繪製照顧你。

一般情況下，我建議使用HTML5畫布，如果您：以上效果

• 需要像素級別的控制（例如，模糊或blending）
• 有非常大量的數據點，這將是提出一次（也許是平移），但在其他方面的靜態

使用SVG，如果您：

• 想在屏幕上繪製複雜的對象與事件相關聯（例如移動數據點上方看到一個提示）
• 想要的結果以高分辨率打印效果不好
• 需要動畫各種圖形部分的形狀獨立
• 將包括在輸出中，你想成爲文本被搜索引擎收錄
• 要使用XML和/或XSLT來產生輸出

Answer 2

畫布不需要，除非你想要重操縱/動畫或將要有10,000多個圖表。更多關於性能分析here.

同樣重要的是使區別：圖表和圖表是兩回事。顯示一些條形圖與（例如）使用10,000個可移動的，可鏈接的，可能動畫的對象製作圖表流程圖非常不同。

每個SVG元素都是DOM元素，並且向DOM中添加10,000或100,000個節點會導致難以置信的減速。但是向Canvas添加許多元素是完全可行的，並且可以相當快。

如果它可能會讓你感到困惑：RaphaelJS（在我看來，最好的圖表SVG庫）使用canvas這個詞，但這與HTML <canvas>元素無關。

Answer 3

在過去的兩年中，我喜歡的是使用SVG，因爲我主要是處理比較小的數據集建立餡餅，柱形圖或地圖。

但是，我發現使用canvas的一個優點是可以將圖表保存爲圖像，這要感謝toDataURL方法。我還沒找到svg的等價物，看起來保存svg圖表客戶端的最好方法是先將其轉換爲畫布（例如使用canvg）。