使用帶有angularjs的圖表

Question

我在一個需要顯示圖表的php項目中。我打算使用Morrisjs來顯示哪些使用Jquery。但是我發現angularjs更有趣。有人可以告訴我如何使用帶有Ajax的angularjs上的圖表和來自php返回的數據。

Answer 1

首先你必須創建一個服務來獲取你的數據。

在代替posts.json這plnkr http://plnkr.co/edit/KbBg67

$http.get('posts.json').success(function(data) { 

看看讓您的數據

下面，你可以看到我們是如何將數據推到一個數組，該文件有很好的註釋。

而現在，從控制器，您可以訪問該數據。

現在您必須創建指令來呈現圖表。

這是一個很好的例子，可以根據你的需要進行調整。 http://eric-schaefer.com/blog/2013/07/26/rendering-flot-charts-through-angular-js/

Answer 2

下面的鏈接爲谷歌圖表工具指令模塊，用於AngularJS

https://github.com/bouil/angular-google-chart

http://gavindraper.com/2013/07/30/google-charts-in-angularjs/

Answer 3

接收數據亞瑟後描述的下一步驟是這個數據綁定到一個指令，它可視化您的數據。 angular-chart爲您做這個工作。

這是一個易於使用的指令，它將D3.js與AngularJS 2-Way-DataBinding連接起來。這樣，無論何時更改配置選項並同時圖表保存其狀態（縮放級別...）以使其在AngularJS世界中可用，圖表都會自動更新。

檢查出examples以確信。

Answer 4

如果您正在使用angularjs,無需使用jquery ajax。在angularjs的幫助下使用所有東西。

這是all for charts，只需按照它。首先玩虛擬數據（不要從數據庫中取回）。

嘗試實施。