2014-12-07 1112 views
39

我在我的項目中多次使用過chart.js,但從未使用過d3.js.很多人都說d3.js是圖表中最好的javascript框架,但它們都不能解釋爲什麼,特別是當我想與chart.js進行比較時。d3.js和chart.js之間的比較(僅適用於圖表)

我找到了這個:http://www.fusioncharts.com/javascript-charting-comparison/ 但它不是我正在尋找。

有沒有人知道這些框架在可用性和性能方面的比較(僅適用於圖表)?

+0

只是爲了好玩,我正在用同樣的數據集使用d3.js開發chart.js基本圖表。 你可以看一下 - https://s.codepen.io/bumbeishvili/debug/RGbvPg – bumbeishvili 2016-09-05 19:45:54

回答

113

d3.js不是「圖表」庫。它是一個用於創建和操作SVG/HTML的庫。它提供了一些工具來幫助您可視化和操縱數據。雖然你可以使用它來創建傳統的圖表(酒吧,線條,派等),但它可以做得更多。當然,這種「能力如此之大」的學習曲線更陡。如果您想要走這條路線,那麼在d3.js - nvd3.jsdimple.jsdc.js之上建立了許多常規制圖庫。

我對Chart.js不熟悉,但是快速瀏覽一下網站告訴我它更像是一個磨圖庫的運行。它支持6種基本的圖表類型,你不會去做stufflikethiswithit但是該API看起來很簡單,我相信它很容易使用。

除此之外,兩者最明顯的區別在於Chart.js是基於canvas的,而d3.js主要是關於SVG的。 (現在我說主要是,因爲SVG可以操作所有類型的HTML元素,因此you could even use it可以幫助您在畫布上繪圖。)一般情況下,畫布將爲大量元素執行SVG(我說的非常大 - 數千點,線等)。另一方面,SVG更容易操作和交互。使用SVG,每個點,線等都成爲DOM的一部分 - 現在您只需要改變它即可。用帆布畫一個靜態的繪畫,它將被重新繪製以做出任何改變 - 當然它畫得如此之快以至於你永遠不會注意到。這裏是來自Microsoft的some good reading

+0

感謝解釋+1。 -1爲MS鏈接。它是舊的。 – atilkan 2016-05-27 00:33:25

+3

@emrah,鏈接可能會比較舊(大約是IE9的時間),但提供的信息仍然非常相關。 – Mark 2016-05-27 00:41:58

+0

好的。這是你的觀點。謝謝。雖然更新了答案。 – atilkan 2016-05-27 01:40:47

9

已更新2016

一般的經驗法則是:

d3.js - 偉大的交互式可視化

chart.js - 偉大的快速和簡單的

A few other charting libraries有上升的趨勢,所以請繼續測試,不要忘記爲open source做出貢獻!

4

由於我試圖找到一個快速的圖表庫來顯示移動設備上的圖表,因此性能對我來說很重要。它還必須有一個許可證,可以在商業上使用。我比較:

  1. C3,這是基於d3和因此使用SVG
  2. 圖表。js正在使用canvas

圖表在本機應用程序內部的WebView組件內部加載,所有數據(包括JS庫)都是本地的,因此不會因爲http請求而減慢速度。爲了最大限度地提高性能,我另外將所有內容放在一個文件中。

我加載了4個圖表(線條,條形,餅圖,線條組合),共有500個數據點。

我的時間測量排除了html頁面的實際加載。我在開始使用圖表庫代碼的那一刻開始測量,直到渲染結束。所有圖表動畫已關閉。

C3在現代Android和iPhone設備上花費了大約1500-1800毫秒。 iPhone的性能比Android好了大約100ms。

Chart.js花費了大約400-800ms。 Android比iPhone執行時間大約300ms。沒有意外的是,SVG速度較慢。根據你的用例,可能太慢了。

在c3上渲染的桌面計算機大約在150-200ms之間,而charts.js大約在80-100ms之間。在Android和iPhone模擬器中運行相同的測試與桌面上的測試結果相同。所以移動設備的速度降低肯定是由於硬件/處理限制。

希望可以幫到