如何在Angularjs中使用融合图表中的自定义过滤器？

时间：2017-01-02 13:24:07

标签： angularjs json fusioncharts

我在Angularjs中遇到了融合图表的问题，我需要根据json数据中的一个值设置数据。我的融合图显示了混乱的数据。但我需要按照给定图像中所示的要求对其进行过滤。

enter image description here

但我得到的结果是： enter image description here

很少有数据属于 SBHL ，这应该属于 SBML 我需要根据产品过滤数据，即（SBHL或SBML）。

让我向您展示我用于融合图表的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);
  })
}

那些回答的人将不胜感激。谢谢。

1 个答案:

答案 0 :(得分：1)

多系列堆叠柱形图未正确实施逻辑。 代码的结果JSON结构不符合所述图表的支持格式，因此两个类别的数据都被错误地可视化。请访问小提琴链接http://jsfiddle.net/Soumya_dutta/u7ju71oo/29/

请检查修改后的html和脚本

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

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));
        });
相关问题
最新问题