我正在使用Angularjs处理融合图表。记录变得混乱，我的融合图表中没有显示很少的记录。我无法弄清楚自己犯了什么错误。
这是我的html和script
<div>
<div fusioncharts width="700" height="450" type="msstackedcolumn2d" dataSource="{{dataSource}}" categories="{{categories}}" chart="{{attrs}}" dataFormat= 'json' dataset="{{dataset}}" events="events">
</div>
</div>
的script.js
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"
};
console.log($scope.records);
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 dataSet = [];
var tempDataSet = {};
var maxYaxisVal =0;
$scope.dataset2 = data
for (var i = 0, l = data.length; i < l; i++) {
if(data[i].allocatedAccount > maxYaxisVal)
{
maxYaxisVal = data[i].allocatedAccount;
}
if(data[i].collectedAccount > maxYaxisVal)
{
maxYaxisVal = data[i].collectedAccount;
}
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);
console.log(products)
}
console.log(data[i].collectedAccount);
//console.log(data[i].bucket);
if ((i == (data.length - 1))) {
valHolder = {};
valHolder["value"] = data[i].allocatedAccount;
allocatedCollection.push(valHolder);
valHolder = {};
valHolder["value"] = data[i].collectedAccount;
collectedCollection.push(valHolder);
}
if ((buckets.indexOf(data[i].bucket)) || (i == (data.length-1)))
{
//console.log(data[i].product);
if((buckets.length > 0) )
{
seriesItem = {};
seriesItem["seriesname"] = data[i-1].bucket + " allocated";
seriesItem["data"] = allocatedCollection;
allocatedDataSet.push(seriesItem);
seriesItem = {};
seriesItem["seriesname"] = data[i-1].bucket + " collected";
seriesItem["data"] = collectedCollection;
collectedDataSet.push(seriesItem);
collectedCollection = [];
allocatedCollection = [];
}
buckets.push(data[i].bucket);
}
valHolder = {};
valHolder["value"] = data[i].allocatedAccount;
allocatedCollection.push(valHolder);
valHolder = {};
valHolder["value"] = data[i].collectedAccount;
collectedCollection.push(valHolder);
// valCollection.push(valHolder);
//console.log(collectedCollection);
}
catHolder["category"] = catObject ;
catCollection.push(catHolder);
tempDataSet["dataset"] = allocatedDataSet;
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;
});
正如您可能已经观察到json 1中有两种类型的产品。 SBHL 和2. SBML ，并且每个产品都是json中的不同桶。 1.桶：＆＃34;＆gt; 90＆＃34; 2.bucket：＆＃34; 0-30＆＃34; 3.bucket：＆＃34; 31-60＆＃34;和桶：＆＃34; 61-90＆＃34;。但是，在运行融合图表时，我还在 SBHL 中获得 SBML 记录，并且还缺少一些存储桶（存储桶＆＃34;：＆＃34; 61-90＆＃34）。你能找到解决方案吗？
我的工作小提琴：http://jsfiddle.net/u7ju71oo/10/
答案 0 :(得分：2)
多系列堆叠柱形图未正确实施逻辑。 代码的结果JSON结构不符合所述图表所支持的格式，因此两个类别的数据都被错误地显示出来。
请访问小提琴链接http://jsfiddle.net/Soumya_dutta/u7ju71oo/29/
请检查修改过的脚本
-
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));
});