Question

我在正在进行的项目中使用角度图表。为了方便用户，我想根据角度图表中的月份使用下拉过滤器搜索。可能吗？这是我的代码：

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>

Answer 1

角度图表正在观察绑定到它的数据，因此您可以对属性使用角度过滤器。

构建一个带有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>

使用下拉列表中的值或任何您需要的值更改硬编码值。

Answer 2

您可以使用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>

如何在角度图表中使用滤镜搜索？

2 个答案: