将JSON数据加载到Angular-nvD3 Graph(AngularJS)中
Load JSON Data into Angular-nvD3 Graph (AngularJS)
我想将通过查询从数据库检索到的编码JSON数据加载到Angular-nvD3图中,但我不知道如何做到这一点,也不知道哪种方式是完成这项任务的最佳方式。
我使用api从数据库(表PRODUCTS)中检索带有查询的编码JSON数据。我已经通过对给定api的$http
请求(加载到工厂中)成功地将这些数据加载到表中。数据作为对象保存到工厂中的字典中,并向api(位于服务中)发出$http
请求。
表格示例(表格PRODUCTS):
ID库存
1100
2 275
工厂样品:
.factory('services', ['$http', function($http){
var serviceBase = 'services/'
var object = {};
object.getData = function(){
return $http.get(serviceBase + 'data');
};
return object;
}]);
将数据显示到表格中的控制器示例(视图中有"ng-repeat="data in get_data"
"):
.controller('TablesCtrl', ['$scope', 'services', function($scope, services) {
services.getData().then(function(data){
$scope.get_data = data.data;
});
}]);
数据格式示例:
[{"0":"1","1":"100","ID":"1","STOCK":"100"},{"0":"2","1":"275","ID":"2","STOCK":"275"}]
PIE CHART-这是我想要添加的脚本类型的示例(来自This存储库):
'use strict';
angular.module('mainApp.controllers')
.controller('pieChartCtrl', function($scope){
$scope.options = {
chart: {
type: 'pieChart',
height: 500,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
}
}
};
$scope.data = [
{
key: "One",
y: 5
},
{
key: "Two",
y: 2
},
{
key: "Three",
y: 9
},
{
key: "Four",
y: 7
},
{
key: "Five",
y: 4
},
{
key: "Six",
y: 3
},
{
key: "Seven",
y: .5
}
];
});
HTML:
<div ng-app="myApp">
<div ng-controller="pieChartCtrl">
<nvd3 options="options" data="data"></nvd3>
</div>
</div>
我的问题是:如何将这样检索到的编码JSON数据加载到Angular-nvD3图中,而不是手动将数据输入到$scope.data
中?
非常感谢!
您所要做的就是在收到数据后对其进行映射。我从评论中更新了plunker,向您展示如何使用lodash实现这一点。
services.getData().then(function successCb(data) {
$scope.data = _.map(data.data, function(prod) {
return {
key: prod.ID,
y: prod.STOCK
};
});
});
或者,如果你不想使用lodash(尽管默认情况下它通常包含在angular应用程序中),你可以这样做:
$scope.data = [];
services.getData().then(function successCb(data) {
angular.forEach(data.data, function(prod) {
$scope.data.push({
key: prod.ID,
y: prod.STOCK
});
});
});
我想你想要d3.json()
https://github.com/mbostock/d3/wiki/Requests
此命令应加载任何JSON文件。既然您使用的是NVD3,那么您的项目中应该已经有了D3。
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- AngularJS:我可以跳过函数参数回调吗
- AngularJS UI路由器不能像ng路由器那样工作
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- 如何包含特定于每个视图angularjs的javascript文件
- AngularJS:ng之后,重复$scope值未按预期更新
- AngularJS-在JSON选择器中使用变量名
- $window.ga在AngularJS事件中未定义
- AngularJS-使用'true'属性
- 打开一个模态并将其链接到AngularJS中的指令
- Angularjs代码未在匿名函数中运行
- angularjs+rails应用程序中未显示模板
- 我的AngularJS表达式没有'不起作用
- AngularJS JSON not arriving php
- 使用AngularJS中的筛选器更新给定的表
- Angularjs工厂注入错误
- AngularJS设计指南
- Angularjs-utils高亮过滤器在搜索时破坏应用程序
- 将JSON数据加载到Angular-nvD3 Graph(AngularJS)中
- 有没有任何可能的方法将元标签(OPEN GRAPH)从服务器端php获取到angularjs SPA中