題:
可以與AngularJS配合使用的JS圖表庫
Erez Cohen
2015-07-29 13:39:31 UTC
view on stackexchange narkive permalink

我正在尋找一個與AngularJS配合良好的javascript圖表/圖形庫。

我打算主要實現折線圖,但是有些複雜,因此應該高度可定制(例如,同步圖,多個y軸,包括線和點)。同一張圖,最多可處理10k點...)

Highcharts似乎是一個很好的庫,但它是基於jquery的。它具有以下包裝器: https://github.com/pablojim/highcharts-ng,但是它說“由於許多相等性檢查,該指令對於大型數據集可能很慢”。

我正在考慮的其他選項:

  • ZingChart
  • FusionCharts
  • Google圖表
  • NVD3
  • nv圖表

我願意接受更多選擇...

http://jtblin.github.io/angular-chart.js/怎麼樣?
謝謝! Chart.js確實看起來像一個讓人眼花can亂的庫,但是與其他庫所揭示的豐富功能相比,它們的API似乎很薄。我知道在功能中,我需要他們不支持的複雜功能。
D3js可能是功能最強大/最受歡迎的免費JS庫,因此最好使用一個包裝器(https://github.com/mbostock/d3/wiki/Gallery)。我發現https://www.dashingd3js.com/d3-resources/d3-and-angular讓我們尋找其他人。並且也請參閱我的問題http://softwarerecs.stackexchange.com/questions/21614/angularjs-charting-with-treemap-and-heatmasp-would-eb-nice
D3確實功能強大,但實際上您必須自己繪製幾乎所有內容。對於我的需求,沒有理由不使用現有的庫-儘管我需要許多功能,但是沒有任何功能不能通過現有的庫實現。
我決定從Highcharts PoC開始。將結果發佈在這裡。
四 答案:
#1
+5
mike-schultz
2015-07-31 02:42:35 UTC
view on stackexchange narkive permalink

ZingChart確實有其自己的AngularJS指令: https://github.com/zingchart/ZingChart-AngularJS

它具有將數據注入圖表中的三種途徑,每種擁有自己的性能成本和功能優勢。我在這裡概述了每個對象: http://www.zingchart.com/blog/2015/03/05/zingchart-angularjs/

我在ZingChart團隊中,碰巧創建了指令,因此如果您有任何疑問,請隨時與我們聯繫。

由於問題是免費提供的,因此我必須指出,Zing僅在您為圖表添加品牌時才是免費的,並不是每個人都希望這樣做。有關更多信息,請訪問https://www.zingchart.com/buy/
#2
+1
Davis Jebaraj
2015-08-28 23:24:20 UTC
view on stackexchange narkive permalink

JavaScript基本圖表也是要考慮的另一種選擇。簡單的示例應用程序:鏈接

如果您有資格,可以通過社區許可程序免費獲得整套控件。注意:我為Syncfusion工作。

既然您為Syncfusion工作,您能否告訴我們如何在AngularJs中使用該庫(畢竟這是問題所在)。謝謝
請參閱[this](http://help.syncfusion.com/js/chart/working-with-data#angularjs-data-binding)文檔鏈接,以將Chart與Angular JS結合使用。
謝謝。您的產品看起來很棒,社區許可非常慷慨,給我留下了深刻的印象:“誰有資格?在年總收入低於100萬美元的公司中,單獨開發人員或最多五個用戶”
#3
+1
jsDoggy
2015-12-09 06:51:10 UTC
view on stackexchange narkive permalink

在我的項目中,我使用了 D3.js,並且它與AngularJS(v 1.2 / 1.3)很好地兼容。

我創建了一些與圖表類型相關的新指令需要。我沒問題。

編輯: b>

  • 它具有折線圖
  • 可以處理很多對象
  • 免費

D3.js創建了一個SVG,因此庫可以處理SVG的所有功能。

我不知道有比D3.js更好,更流行的免費JS圖表庫,也就是說,可用的包裝器並不能涵蓋所有圖表類型,因此您可能需要在其中做一些工作。我剛剛啟動了一個AngularJs項目並打算使用D3.js,所以如果jsDoggy發布一些有關如何為D3.js創建新指令的鏈接將不勝感激。
當然,我也有一些代碼可以“注入”D3.js。當我找到一個代碼段時,將其發佈在這裡。此外,正如@Mawg所說,我將展示一些示例指令。編輯:它將很有用:http://www.ng-newsletter.com/posts/d3-on-angular.html
#4
  0
Jonathan Pereira
2017-10-11 17:05:48 UTC
view on stackexchange narkive permalink

根據您的要求,FusionCharts將是最合適的Javascript庫。該庫具有 FusionCharts-Angular指令,這將使在Angular應用中輕鬆創建圖表變得輕而易舉。該庫還允許您自定義所有圖表屬性,以使圖表看起來像您想要的樣子。

您還可以閱讀此快速指南,以Angular創建圖表

如果您需要任何其他建議,將很樂意為您提供幫助。



該問答將自動從英語翻譯而來。原始內容可在stackexchange上找到,我們感謝它分發的cc by-sa 3.0許可。
Loading...