角度チャートでフィルタ検索を使用するにはどうすればよいですか？

私は進行中のプロジェクトで角度チャートを使用しています。また、ユーザーの利便性のために、角度チャートのドロップダウンフィルター検索を月単位で使用したいと考えています。出来ますか？ここに私のコードです：角度チャートでフィルタ検索を使用するにはどうすればよいですか？

app.controller('newController',['$scope',function($scope){ 
    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; 
    $scope.series = ['Expenses', 'Invoices', 'Proposals']; 
    $scope.data = [ 
     [65, 59, 80, 81, 56, 55, 40], 
     [28, 48, 40, 19, 86, 27, 90], 
     [50, 20, 10, 35, 70, 1, 100] 
    ]; 
}]) 

<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick" style="height: 185px; width: 339px;"></canvas>

出典

2017-01-01 Ashish Poudyal

月単位または年単位ですか？ – Sajeetharan

ヶ月... 1月から9月のように –

ですが、フィルタリングするデータはありません – Sajeetharan

あなたはangular.foreachを使用することができます。ここで

あなたは属性に角度フィルタを使用できるようにDEMO

(function(angular) { 
 
    'use strict'; 
 
    angular.module('myApp', ['chart.js']) 
 

 
    .controller('myController', [function() { 
 
    
 
    var ctrl = this; 
 
    ctrl.newlables = []; 
 
    ctrl.applydata = function(){ 
 
     angular.forEach(ctrl.socialChart.labels,function(val){ 
 
     if(val > ctrl.socialChart.fromyear && val < ctrl.socialChart.toyear){ 
 
      ctrl.newlables.push(val); 
 
     } 
 
     ctrl.socialChart.labels = ctrl.newlables; 
 
     }); 
 
     
 
    } 
 
    ctrl.socialChart = { 
 
     fromyear :'', 
 
     toyear:'', 
 
     type: 'Bar', 
 
     labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'], 
 
     series:['Expenses', 'Invoices', 'Proposals'], 
 
     colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'], 
 
     data : [ 
 
     [65, 59, 80, 81, 56, 55, 40], 
 
     [28, 48, 40, 19, 86, 27, 90], 
 
     [50, 20, 10, 35, 70, 1, 100] 
 
    ] 
 
    } 
 
     ctrl.filtervalues = ctrl.socialChart.labels; 
 
     
 
    }]); 
 

 
})(window.angular);

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Multi Slot Transclude</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-app="myApp" ng-controller="myController as ctrl"> 
 

 
    <select ng-model="ctrl.socialChart.fromyear" ng-options="o as o for o in ctrl.filtervalues"> 
 
    </select> 
 
    <select ng-model="ctrl.socialChart.toyear" ng-options="o as o for o in ctrl.filtervalues"> 
 
    </select> 
 
    <canvas id="outreach" class="chart chart-bar" chart-labels="ctrl.socialChart.labels" chart-data="ctrl.socialChart.data" chart-series="ctrl.socialChart.series" chart-colors="ctrl.socialChart.colors" chart-options="ctrl.socialChart.options"></canvas> 
 

 
<button ng-click="ctrl.applydata()"> Filter</button> 
 
</body> 
 

 

 
</html>

出典

2017-01-03 07:59:34 Sajeetharan

角度チャートは、それにバインドされたデータを見ていますさ。

2つの引数をとり、配列をフィルターするカスタムフィルターを作成します。

function isBetween(from, to) { 
    return function(val) { 
     return val >= from && val <= to; 
    } 
}

今すぐ機能isBetweenを想定したが$scopeに制限され、あなたが使用することができます。

<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels|filter:isBetween(2007, 2009)" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick" style="height: 185px; width: 339px;"></canvas>

変更ドロップダウンまたは何でもあなたが必要とするから値を持つハードコードされた値。

出典

2017-01-03 08:16:47

角度チャートでフィルタ検索を使用するにはどうすればよいですか？

答えて

関連する問題