Javascript 将JSON数据加载到Angular-nvD3图形（AngularJS）中
我想将通过查询从数据库检索到的编码JSON数据加载到Angular-nvD3图形中，但我不知道如何执行，也不知道哪种方式是完成此任务的最佳方式 我使用api从数据库（表产品）检索带查询的编码JSON数据。我已经通过Javascript 将JSON数据加载到Angular-nvD3图形（AngularJS）中,javascript,html,angularjs,json,angular-nvd3,Javascript,Html,Angularjs,Json,Angular Nvd3,我想将通过查询从数据库检索到的编码JSON数据加载到Angular-nvD3图形中，但我不知道如何执行，也不知道哪种方式是完成此任务的最佳方式 我使用api从数据库（表产品）检索带查询的编码JSON数据。我已经通过$http请求（加载到工厂中）成功地将这些数据加载到表中，并将其加载到给定的api中。数据作为对象保存在工厂的字典中，并带有对api的$http请求（位于服务中） 表格样本（表格产品）： .factory('services', ['$http', function($http){
$http$http.factory('services', ['$http', function($http){
var serviceBase = 'services/'
var object = {};
object.getData = function(){
return $http.get(serviceBase + 'data');
};
return object;
}]);
.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"}]
'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
}
];
});
<div ng-app="myApp">
<div ng-controller="pieChartCtrl">
<nvd3 options="options" data="data"></nvd3>
</div>
</div>
.factory('services', ['$http', function($http){
var serviceBase = 'services/'
var object = {};
object.getData = function(){
return $http.get(serviceBase + 'data');
};
return object;
}]);
.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"}]
'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
}
];
});
<div ng-app="myApp">
<div ng-controller="pieChartCtrl">
<nvd3 options="options" data="data"></nvd3>
</div>
</div>
ng repeat=“获取数据中的数据”.factory('services', ['$http', function($http){
var serviceBase = 'services/'
var object = {};
object.getData = function(){
return $http.get(serviceBase + 'data');
};
return object;
}]);
.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"}]
'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
}
];
});
<div ng-app="myApp">
<div ng-controller="pieChartCtrl">
<nvd3 options="options" data="data"></nvd3>
</div>
</div>
.factory('services', ['$http', function($http){
var serviceBase = 'services/'
var object = {};
object.getData = function(){
return $http.get(serviceBase + 'data');
};
return object;
}]);
.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"}]
'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
}
];
});
<div ng-app="myApp">
<div ng-controller="pieChartCtrl">
<nvd3 options="options" data="data"></nvd3>
</div>
</div>
.factory('services', ['$http', function($http){
var serviceBase = 'services/'
var object = {};
object.getData = function(){
return $http.get(serviceBase + 'data');
};
return object;
}]);
.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"}]
'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
}
];
});
<div ng-app="myApp">
<div ng-controller="pieChartCtrl">
<nvd3 options="options" data="data"></nvd3>
</div>
</div>
.factory('services', ['$http', function($http){
var serviceBase = 'services/'
var object = {};
object.getData = function(){
return $http.get(serviceBase + 'data');
};
return object;
}]);
.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"}]
'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
}
];
});
<div ng-app="myApp">
<div ng-controller="pieChartCtrl">
<nvd3 options="options" data="data"></nvd3>
</div>
</div>
$scope.data多谢各位 我想您需要
d3.json（）此命令应加载任何JSON文件。因为您使用的是NVD3，所以您的项目中应该已经有了D3。您需要做的就是在收到数据后映射数据。我希望通过我的评论向您展示如何使用lodash做到这一点
services.getData().then(function successCb(data) {
$scope.data = _.map(data.data, function(prod) {
return {
key: prod.ID,
y: prod.STOCK
};
});
});
$scope.data = [];
services.getData().then(function successCb(data) {
angular.forEach(data.data, function(prod) {
$scope.data.push({
key: prod.ID,
y: prod.STOCK
});
});
});
我不想加载JSON文件。我想加载直接从带有查询的数据库检索的JSON数据。数据以对象的形式保存到工厂的字典中，并向api发出$http请求。如果json数据的格式可以直接插入图表中，那么那里的数据就可以使用了。它将是
services.getData（）.then（函数（数据）{$scope.data=data.data；}）。否则，您可能必须将数据按摩到图表所期望的结构中..我认为我不能直接将数据插入图表中。我的问题是如何将数据转换成图表所期望的结构？例如，有两个查询：一个对象带有“键”，另一个对象带有“y”（值）？都是JSON格式。如果你知道你的数据是什么样子，我可以帮你。否则，我可以告诉您，您需要使用一个函数或多个函数将数据转换为该结构。非常感谢。我用数据格式的一个示例更新了我的帖子，并向数据库发出了一个请求（表产品有两列：ID和STOCK）。@Ariana，提供了一种创建条形图兼容数据的方法。噢，谢谢你，但同时我创建了我自己的方法（类似于你的方法）。然而，它可能对其他人非常有用！谢谢你所做的一切：）