2016-12-30 54 views
2

我正在使用Angularjs來處理角度融合圖表,使用Multi Series Stacked Column 2d圖表。我現在面臨3個問題融合圖表那些被提及如下:使用msstackedcolumn2d在融合圖表中顯示記錄時遇到困難

  • 我無法找到我融合圖表酒吧如果我通過一個數據

  • 如果我發送多於一個數據,但很少數據顯示zero中的值,我得到融合圖表中的條。

  • 當我上生成按鈕再次單擊相同的搜尋它表明我zero記錄它即使是有記錄

讓我告訴你的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); 
    }) 
} 

請誰能告訴我我哪裏錯了。因爲我是新來的融合圖表

+0

這將是非常有益的,如果你能在[這裏]重新產生問題(HTTPS ://jsfiddle.net/)。 –

+0

@ pritishvaidya我有一些Api數據可以分享我的工作文件夾給你。 –

+0

只是它拋出錯誤的基本功能,你可以用啞數據替換數據並重現小提琴 –

回答

0
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": 153, 
    "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)); 
     }); 
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>