2017-01-02 9 views
0

こんにちは皆私は角度融合チャートで作業しています。私は持っている製品(jsonデータ)に従ってデータを設定したいと思います。しかし、ここでは私の融合図でindexofメソッドを使用している間、問題に直面しています。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で見ることができ、製品に応じてデータを設定する必要が説明しましょう。各製品には、独自のバケット、allocatedAccountおよびcollectedAccountがあります。しかし、私のグラフは混乱したデータを示しています。私は製品に応じて設定する必要があります。

私はあなたにスクリプトをお見せしましょう:

$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:

<div fusioncharts width="700" height="450" type="msstackedcolumn2d" chart=" {{attrs}}" categories="{{categories}}" dataset="{{dataset}}"> 
</div> 

答えて

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>

フィドルのリンクをご覧ください
関連する問題