Fatal编程技术网
  • angularjs/
  • AngularJS：将值从ng repeat传递到条形图

AngularJS：将值从ng repeat传递到条形图

angularjs

AngularJS：将值从ng repeat传递到条形图,angularjs,angularjs-ng-repeat,bar-chart,angular-filters,Angularjs,Angularjs Ng Repeat,Bar Chart,Angular Filters,我正在使用countBy函数对一列的条目数进行分组和计数。我想将这些值传递到同一页上的单独条形图中。我尝试了很多方法，但都没有成功 HTML: <!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <scrip

我正在使用countBy函数对一列的条目数进行分组和计数。我想将这些值传递到同一页上的单独条形图中。我尝试了很多方法，但都没有成功

HTML:
<!doctype html>
<html ng-app="app">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script> -->
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.css"></script>
    <script src="node_modules/angular-chart.js/node_modules/chart.js/dist/Chart.min.js"></script>
    <script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
    <script src="node_modules/angular-filter/dist/angular-filter.min.js"></script>
    <!-- <script src="/js/app.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="/css/main.css" type="text/css">
    <!-- <link rel="stylesheet" href="/webjars/bootstrap/3.3.6/css/bootstrap.css"> -->
</head>
  <body>
<div ng-controller="myController">
      <div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
      <div><canvas id="bar" class="chart chart-bar"chart-data="key" chart-labels="value" chart-series="series"></canvas></div>
      <div><li ng-repeat="(key, value) in myData | countBy: 'col_ky'" >Column Key: {{ key }}, Number of Hits: {{ value }}</li></div>
    </div>
</body>
</html>
如果我可以将ng repeat中的键和值传递到控制器中的barData和标签变量，那么我可以使用barData和标签填充条形图。那么我该怎么做呢？

我终于让代码JSFIDLE正常工作了，它工作得很好。代码显示了如何调用自定义筛选器函数。我希望这就是你要找的。还有一件事。执行自定义筛选器的行也是如此

$scope.barData = $filter('countBy')($scope.myData, "col_ky");
Jsfiddle:

最终输出：

您想举办一些活动吗？问题还不清楚。您只需使用myData变量中的数据，并显示条形图hhi@NarenMurali。我希望将该列显示在条形图中的次数计数，例如col_键75421点击6。我不希望输入myData中的原始数据。我检查了您的代码。此链接可以与您创建的ui网格集成，并获得所需的值，然后在事件中创建for循环以循环myData，并仅计算包含选定数据的行。希望这能有所帮助。抱歉@NarenMurali，我想我不需要onclickevent（）。我需要能够在div之间直接在html中传递key，value，或者将key，value传递给控制器。我现在已经尝试将过滤器直接注入控制器，但是我也无法让它工作 
$scope.barData = $filter('countBy')($scope.myData, "col_ky");