大家好我正在研究Angular融合图。我想根据我的产品（json数据）设置数据。但是在我的融合图表中使用indexof方法时我遇到了一个问题。
让我分享一下我的json数据：
[
{
"product": "SBHL",
"bucket": ">90",
"allocatedAccount": 3005,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 3005
},
{
"product": "SBHL",
"bucket": "0-30",
"allocatedAccount": 4810,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 4810
},
{
"product": "SBHL",
"bucket": "31-60",
"allocatedAccount": 1610,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 1610
},
{
"product": "SBHL",
"bucket": "61-90",
"allocatedAccount": 793,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 793
},
{
"product": "SBML",
"bucket": ">90",
"allocatedAccount": 1084,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 1084
},
{
"product": "SBML",
"bucket": "0-30",
"allocatedAccount": 1583,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 1583
},
{
"product": "SBML",
"bucket": "31-60",
"allocatedAccount": 473,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 473
},
{
"product": "SBML",
"bucket": "61-90",
"allocatedAccount": 273,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 273
}
]
让我清楚地解释一下，我需要根据产品设置数据，你可以在json中看到。每个产品都有自己的存储桶，assignedAccount和gatherAccount。但我的图表显示了混乱的数据。我需要根据产品进行设置。
让我告诉你剧本：
$scope.generate = function() {
$scope.searchResults = false
$scope.showLoader = true
var data = reportService.allocationCollection($scope.query).success(function(data) {
console.log(data.bucket)
var products = [];
var buckets = [];
var catObject = [];
var catCollection = [];
var item = {};
var seriesItem = {};
var catHolder = {};
var valHolder = {};
var valCollection = [];
var allocatedCollection = [];
var collectedCollection = [];
var allocatedDataSet = [];
var collectedDataSet = [];
var tempDataSet = {};
var maxYaxisVal = 0;
$scope.dataset2 = data
for (var i = 0, l = data.length; i < l; i++) {
//console.log(data[i].bucket)
if (data[i].allocatedAccount > maxYaxisVal) {
maxYaxisVal = data[i].allocatedAccount;
}
if (data[i].collectedAccount > maxYaxisVal) {
maxYaxisVal = data[i].collectedAccount;
}
console.log(products);
if ((products.indexOf(data[i].product) == -1) || (i == (data.length -1))) {
item = {};
item["label"] = "Allocated\t\tCollected(" + data[i].product +")";
item["font"] = "Arial";
item["fontsize"] = "15";
catObject.push(item);
products.push(data[i].product);
}
//console.log(data[i].bucket);
if ((i == (data.length - 1))) {
valHolder = {};
valHolder["value"] = data[i].allocatedAccount;
allocatedCollection.push(valHolder);console.log()
valHolder = {};
valHolder["value"] = data[i].collectedAccount;
collectedCollection.push(valHolder);
}
if ((buckets.indexOf(data[i].bucket)== -1) || (i == (data.length -1))) {
// console.log(data[i].bucket)
if (buckets.length > 0) {
seriesItem = {};
seriesItem["seriesname"] = data[i].bucket + "allocated";
seriesItem["data"] = allocatedCollection;
allocatedDataSet.push(seriesItem);
console.log(JSON.stringify(seriesItem));
seriesItem = {};
seriesItem["seriesname"] = data[i].bucket + "collected";
seriesItem["data"] = collectedCollection;
collectedDataSet.push(seriesItem);
collectedCollection = [];
allocatedCollection = [];
//console.log(allocatedDataSet)
}
buckets.push(data[i].bucket);
//console.log(buckets.length);
}
valHolder = {};
valHolder["value"] = data[i].allocatedAccount;
allocatedCollection.push(valHolder);
valHolder = {};
valHolder["value"] = data[i].collectedAccount;
collectedCollection.push(valHolder);
}
catHolder["category"] = catObject;
catCollection.push(catHolder);
tempDataSet["dataset"] = allocatedDataSet;
dataSet = [];
dataSet.push(tempDataSet);
tempDataSet = {};
tempDataSet["dataset"] = collectedDataSet;
dataSet.push(tempDataSet);
$scope.categories = JSON.stringify(catCollection);
$scope.dataset = JSON.stringify(dataSet);
//console.log(JSON.stringify(dataSet));
$scope.attrs.yaxismaxvalue = maxYaxisVal;
console.log($scope.attrs.yaxismaxvalue)
$scope.showLoader = false;
setTimeout(function() {
$('html, body').animate({
scrollTop: $(document).height()
}, 'slow');
}, 200);
$scope.results = data;
console.log($scope.query.product);
if ($scope.results.length > 0) {
$scope.searchResults = true
//console.log("hi");
_.forEach($scope.results.entities, function(obj) {
console.log("hi");
obj.isChecked = false;
});
console.log("hi1");
$scope.view_data = $scope.results.slice($scope.skip, $scope.items + $scope.skip);
//console.log("hi2");
$scope.totalItems = $scope.results.length;
console.log(data);
$scope.results = data;
//$scope.results = $filter('orderByValue')(data);
// called on header click
} else {
$scope.searchResults = false
notificationFactory.warning('No results Found')
$scope.showLoader = false
}
}).error(function(data) {
notificationFactory.warning('Error Searching Reports')
console.log(data);
})
}
我的Html for fusion chart：
<div fusioncharts width="700" height="450" type="msstackedcolumn2d" chart=" {{attrs}}" categories="{{categories}}" dataset="{{dataset}}">
</div>
答案 0 :(得分：1)
多系列堆叠柱形图未正确实施逻辑。代码的结果JSON结构不符合所述图表所支持的格式，因此两个类别的数据都被错误地显示出来。
请访问小提琴链接http://jsfiddle.net/Akash008/u7ju71oo/39/
请检查修改过的脚本
var app = angular.module('HelloApp', ["ng-fusioncharts"])
app.controller('MyController', function($scope) {
$scope.chartoptions = {
"dataEmptyMessage": "No data to display <br> Do these steps..."
};
data =[
{
"product": "SBHL",
"bucket": ">90",
"allocatedAccount": 3005,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 3005
},
{
"product": "SBHL",
"bucket": "0-30",
"allocatedAccount": 4810,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 4810
},
{
"product": "SBHL",
"bucket": "31-60",
"allocatedAccount": 1610,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 1610
},
{
"product": "SBHL",
"bucket": "61-90",
"allocatedAccount": 793,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 793
},
{
"product": "SBML",
"bucket": ">90",
"allocatedAccount": 1084,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 1084
},
{
"product": "SBML",
"bucket": "0-30",
"allocatedAccount": 1583,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 1583
},
{
"product": "SBML",
"bucket": "31-60",
"allocatedAccount": 473,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 473
},
{
"product": "SBML",
"bucket": "61-90",
"allocatedAccount": 273,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 273
}
]
$scope.attrs = {
"palette":"3",
"numdivlines":'3',
"numberprefix": "",
"useRoundEdges":"1",
"bgcolor": "FFFFFF,FFFFFF",
"showalternatehgridcolor": "1",
"showvalues": "0",
"yaxismaxvalue": "1000",
"showLegend":"1",
"showborder": "0",
"labelDisplay": "wrap",
"yAxisName": "Number Of Accounts",
"maxLabelHeight":"150"
};
var products = [];
var catObject = [];
var catCollection = [];
var item = {};
var catHolder = {};
var buckets = [];
var dataSet=[];
var seriesItem = {};
var productWiseAllocationarr=[];
var productWiseCollectionarr= [];
var allocatedDataSet = [];
var collectedDataSet = [];
var tempDataSet = {};
var allseries={};
var collseries={};
var allocatedData = [];
var collectedData = [];
for (var i = 0, l = data.length; i < l; i++) {
if (products.indexOf(data[i].product)== -1)
{
item = {};
item["label"] = "Allocated\tCollected " + data[i].product;
item["font"] = "Arial";
item["fontsize"] = "15";
catObject.push(item);
products.push(data[i].product);
catHolder["category"] = catObject ;
}
if (buckets.indexOf(data[i].bucket)==-1)
{
buckets.push(data[i].bucket);
}
}
for(var j=0;j<products.length;j++)
{
for(var p=0;p<data.length;p++)
{
if(data[p].product==products[j])
{
var productWiseAllocation = {};
productWiseAllocation.name=data[p].product;
productWiseAllocation.series= data[p].bucket;
productWiseAllocation.amount= data[p].allocatedAccount;
productWiseAllocationarr.push( productWiseAllocation);
var productWiseCollection ={};
productWiseCollection.name=data[p].product;
productWiseCollection.series=data[p].bucket;
productWiseCollection.amount=data[p].collectedAccount;
productWiseCollectionarr.push( productWiseCollection);
}
}
}
for(var b =0;b<buckets.length;b++)
{
allseries = {};
allseries.name =buckets[b]+"allocated";
allseries.data=[];
collseries = {};
collseries.name =buckets[b]+"collected";
collseries.data=[];
for(var pr=0;pr< productWiseAllocationarr.length;pr++)
{
if(productWiseAllocationarr[pr].series==buckets[b])
{
allseries.data.push(productWiseAllocationarr[pr].amount);
}
if( productWiseCollectionarr[pr].series==buckets[b])
{
collseries.data.push(productWiseCollectionarr[pr].amount);
}
}
allocatedData.push(allseries);
collectedData.push(collseries);
}
for(var w=0;w<allocatedData.length;w++)
{
seriesItem = {};
seriesItem["seriesname"] = allocatedData[w].name;
seriesItem["data"]=[];
for(var g =0;g<allocatedData[w].data.length;g++)
{
var datavalue={};
datavalue.value=allocatedData[w].data[g];
seriesItem["data"].push(datavalue);
}
allocatedData[w].data;
allocatedDataSet.push(seriesItem);
}
for(var w=0;w< collectedData.length;w++)
{
seriesItem = {};
seriesItem["seriesname"] = collectedData[w].name;
seriesItem["data"]=[];
for(var g =0;g<collectedData[w].data.length;g++)
{
var datavalue={};
datavalue.value=collectedData[w].data[g];
seriesItem["data"].push(datavalue);
}
collectedDataSet.push(seriesItem);
}
tempDataSet["dataset"] = allocatedDataSet;
dataSet.push(tempDataSet);
tempDataSet = {};
tempDataSet["dataset"] = collectedDataSet;
dataSet.push(tempDataSet);
catCollection.push(catHolder);
$scope.categories = JSON.stringify(catCollection);
$scope.dataset = JSON.stringify(dataSet);
console.log(JSON.stringify(dataSet));
});<html ng-app="HelloApp">
<body ng-controller="MyController">
<div>
<div fusioncharts width="700" height="450" type="msstackedcolumn2d" dataSource="{{dataSource}}" categories="{{categories}}" chart="{{attrs}}" dataFormat= 'json' dataset="{{dataset}}" events="events">
</div>
</div>
</body>
</html>