【发布时间】:2017-01-23 16:36:59
【问题描述】:
我正在使用Multi Series Stacked Column 2d 使用Angularjs 绘制角度融合图。在我的融合图表中,我面临 3 个问题,这些问题如下所述:
如果我只传递一个数据,我将无法在我的融合图中找到条形
如果我发送 多个数据,我会在融合图中得到 条形,但很少有数据显示其中的
zero值。当我再次单击生成按钮进行相同的搜索时,它会在其中显示
zero记录即使有记录。 p>
让我向您展示我用于融合图的script 和html。
Index.html
<div class="container-fluid mid-content" ng-show='searchResults'>
<div class="col-lg-9 col-xs-1" id="outPopUp">
<div fusioncharts width="700" height="450" type="msstackedcolumn2d" chart="{{attrs}}"
categories="{{categories}}"
dataset="{{dataset}}">
</div>
</div>
</div>
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
}
]
script.js
$scope.categories = [{
"font": "Arial",
"fontsize": "15",
"fontcolor": "000000"
}];
$scope.attrs = {
"palette": "3",
"numdivlines": '3',
"numberprefix": "",
"useRoundEdges": "1",
"bgcolor": "FFFFFF,FFFFFF",
"showalternatehgridcolor": "1",
"showvalues": "0",
"yaxismaxvalue": "10000",
"showLegend": "1",
"showborder": "0",
"labelDisplay": "wrap",
"yAxisName": "Number Of Accounts",
"maxLabelHeight": "1500"
};
$scope.dataset = [];
$scope.generate = function() {
$scope.searchResults = false
$scope.showLoader = true
var data = reportService.allocationCollection($scope.query).success(function(data) {
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++) {
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\t\tCollected(" + data[i].product +")";
item["font"] = "Arial";
item["fontsize"] = "15";
catObject.push(item);
products.push(data[i].product);
}
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) == -1) || (i == (data.length - 1))) {
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 = [];
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;
$scope.showLoader = false;
setTimeout(function() {
$('html, body').animate({
scrollTop: $(document).height()
}, 'slow');
}, 200);
$scope.results = data;
if ($scope.results.length > 0) {
console.log($scope.query.product);
$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);
})
}
请谁能告诉我哪里出错了。因为我是这个融合图的新手。
【问题讨论】:
-
如果您能在here 中重现该问题,将会非常有帮助。
-
@pritishvaidya 我有一些 Api 数据,我可以将我的工作文件夹分享给你。
-
只是抛出错误的基本功能,您可以用虚拟数据替换数据并重现小提琴
-
@pritishvaidya k,给我一分钟
-
@pritishvaidya 这里是更新的小提琴jsfiddle.net/u7ju71oo/8