Datensätze, die in Fusionsdiagramm mit Angularjs durcheinander geworfen werden

Question

Ich arbeite an Fusion-Diagramm mit Angularjs. Die Datensätze werden durcheinander gebracht, und in meinem Fusion-Chart werden nur wenige Datensätze angezeigt. Ich kann nicht herausfinden, welchen Fehler ich gemacht habe.

Hier ist meine html und 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; 
     }); 

Wie Sie es 2 Arten von Produkten in der json beobachtet haben könnten, sind 1. SBHL und 2. SBML, und jedes Produkt als unterschiedliche Bucket in der JSON. 1. Eimer: "> 90" 2. Eimer: "0-30" 3. Eimer: "31-60" und 4. Eimer: "61-90". Aber während des Laufens die Fusion Chart Ich erhalte die SBML Aufzeichnungen auch in SBHL, und auch einige Eimer fehlen (Eimer „:“ 61-90"). Können Sie eine Lösung dafür finden

Meine Arbeits Geige: http://jsfiddle.net/u7ju71oo/10/

Answer 1

die Logik nicht richtig für Multi-Serie gestapeltes Säulendiagramm implementiert wurde die resultierende JSON Struktur des Codes nicht für das genannte Diagramm das unterstützten Format entspricht daher wurden die Daten fälschlicherweise für visualisiert zu werden. Beide Kategorien:

Bitte besuchen Sie den Fiddle Link http://jsfiddle.net/Soumya_dutta/u7ju71oo/29/

Überprüfen Sie bitte das modifizierte Skript

-

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)); 
});