最快的JavaScript圖表庫真的很龐大的數據

我需要開發一個ASP.NET Web應用程序（而不是MVC），它顯示使用海量數據源（如圖表10億記錄）生成的圖表。最快的JavaScript圖表庫真的很龐大的數據

圖表應至少有這2個特徵：

變焦+通過放大圖表平移點
鼠標懸停顯示摘要數據

所需圖表類型：

折線圖
酒吧/立柱圖表
餅圖
區域圖表（不是必須的）
氣泡圖（不是必須的）的圖表類型
和組合：
- 柱形圖+線圖表
- 面積圖+折線圖（不是必需的）
- 氣泡圖+餅圖（沒必要）

支持的瀏覽器：

的Chrome，Firefox，歌劇，Safari瀏覽器（不是必要的）

IE 7+

可能的解決方案的

現代版本我心目中：
- 服務器端圖表圖像生成：此解決方案是性能良好，但不提供足夠的圖表功能。
- 基於Javascript的圖表：這個解決方案有這麼多的庫，但其中大多數不提供足夠的性能（據我所知，從我的研究）。的事情，我發現：
  - canvasjs
  - dygraphs
  - 谷歌圖表
  - highcharts
  - amcharts
  - jqchart
  - d3js
- 生成服務器上的圖像，利用操作它javascript：T他的解決方案可能會這樣做，但我找不到像這樣工作的任何庫。如果我們決定開發這個，我不知道花費多少時間。
最重要的是圖表生成和網絡瀏覽器的性能。用戶體驗是關鍵。

我應該選擇哪個方向？

來源

2014-09-04 Oğuzhan Arslan

你能想到一個既是服務器端又是客戶端的解決方案嗎？理由是僅用需要的數據加載客戶端。根據需要通過ajax加載剩餘的數據。 – deostroll 2014-09-04 12:48:06

@deostroll，如果我找不到任何解決方案，我可能會開發一個既是服務器端又是客戶端的解決方案。但縮放+平移功能將是一個掙扎... – 2014-09-04 13:06:07

縮放和平移需要特定的API。它們可能是json Web服務或返回所需數據以生成圖表的終點。此外，您可以使用擁有像SignalR這樣的WebSocket概念的庫。當然，請記住，您的應用程序需要以特定方式進行設計。 – deostroll 2014-09-04 13:26:51

我分析了所有的答案，但沒有找到我所需要的，並決定使用dygraphs。

Dygraphs免費提供足夠的性能和ui特有的功能。不支持餅圖，但支持其他圖表類型（或可使用繪圖儀插件支持）。

來源

2014-09-08 06:53:28

Three.js是一個輕量級的JavaScript庫，用於創建3D可視化（使用WebGL，SVG，Canvas或其他渲染器）。
Famo.us是一個JavaScript渲染引擎，用於創建帶3D的網絡應用程序用戶界面，承諾在移動設備上運行平滑（60FPS）。

Famo.us聲稱通過避免DOM佈局和重繪，這是非常昂貴的計算來解決HTML5性能問題。相反，Famo.us保留了一個扁平的DOM，並對所有佈局和定位使用CSS3變換。

來源

2014-09-04 12:48:23 AhmadAssaf

實際上，我們不需要任何三維可視化，而這些庫沒有圖表功能。不過謝謝你的答案。 – 2014-09-04 12:59:47

我特別提到了Famou.us的表現。我不確定是否已經有任何圖表庫。我在某處有幾個書籤，我會檢查它們，看看我能否找到一些有趣的東西 – AhmadAssaf 2014-09-04 13:02:57

謝謝，我會等待您的評論。 – 2014-09-04 13:30:30

我的建議是jqchart或d3js。你提到的圖表庫只是流行的。之前選擇一個庫，請使用下列標準檢查

瀏覽器支持（IE8 +）
移動設備的支持
圖像轉換
產品的清楚的文件（最重要的是）
支持庫的可用性
庫支持樣式或功能的定製

根據您的需要選擇。

我曾嘗試過使用highcharts，jqchart，jqplot，amchart，d3js。

來源

2014-09-04 12:50:51

基於JavaScript的圖表可以滿足您的功能需求。

雖然D3會製作所需的圖表類型並進行縮放，平移和懸停效果，但您需要花費大量建設時間來創建所有可能的用戶交互。出於這個原因，「商店購買」選項可能會更具成本效益。

但是即使像D3這樣的強大選項渲染這樣一個大型的數據集，你肯定會遇到一些問題。

如果您的目標是提供交互式網絡圖表，您的首要考慮應該是您的數據採樣位置。你將不得不抽樣：監視器不能顯示10億個單獨的數據點。另外，從服務器向客戶端傳輸10億個數據點需要大量的數據傳輸時間。

那麼，你離開了哪裏？我在列表中沒有看到的一個JavaScript圖表庫是ZingChart，它將滿足所有這些要求。我們已經處理過類似大小的數據集，當然可以提供關於採樣的建議。其中一個只是針對性能和其他準確性。

以精確：false取樣將是最快的選擇。
智能採樣將評估節點之間的空間差異。如果連續節點超過x像素，則顯示該節點。這可以確保您的數據中的異常值和異常情況不會被刪除。

爲了解決在瀏覽器中渲染的問題，ZingChart提供了SVG，HTML5 Canvas和VML選項。對SVG和Canvas都有好處，但對於這個尺寸的數據集，Canvas提供了一些好處（尤其是如果您需要使用大型數據集的渲染條形圖）。該庫是建立在挫敗感的基礎上，與其他具有大型數據集的產品共同構建的，它能夠在客戶端上呈現數十萬個節點（無需採樣）。

ZingChart還提供交互功能，允許最終用戶瀏覽您的數據並進行可視查詢。這個API非常強大，並且允許您以編程方式或響應用戶事件來控制可視化的每個部分。

您可能對Node.js庫特別感興趣。這是一個服務器端圖像生成庫，它與ZingChart的Canvas客戶端庫非常類似的代碼庫工作。它包含了圖像映射功能和我們的服務器端構建，它提供了一定的交互性。此外，還有在服務器和客戶端上提供相同圖表的好處。這在處理這種大型數據集時可以提供一些有趣的用戶體驗機會。

我在ZingChart團隊，所以如果您對我們的答案與您現在稱重的可能解決方案之間的關係有任何疑問，請隨時與我們聯繫。

來源

2014-09-05 15:54:15 Merrily

最快的JavaScript圖表庫真的很龐大的數據

回答

相關問題