AngularJS：將ng-repeat的值傳遞給條形圖

我正在使用angular-filter countBy函數來對列的條目數進行分組和計數。我想將這些值傳遞給同一頁上的單獨條形圖。我已經嘗試了很多方法，但還沒有設法讓它起作用。AngularJS：將ng-repeat的值傳遞給條形圖

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>

控制器：

var app = angular.module('app',['ngTouch', 'ui.grid', 'chart.js', 'angular.filter']); 
app.controller('myController',['$scope', '$http','$filter',function($scope, $http, $filter) { 

$scope.barData = []; 
$scope.labels = []; 
$scope.myData = [{"col_ky":"75421","crt_ts":1501365031000},{"col_ky":"75421","crt_ts":1501124681000},{"col_ky":"75421","crt_ts":1501124688000},{"col_ky":"880610","crt_ts":1501127589000},{"col_ky":"880610","crt_ts":1501127715000},{"col_ky":"891733","crt_ts":1501128075000},{"col_ky":"75421","crt_ts":1501128130000},{"col_ky":"880610","crt_ts":1501128181000},{"col_ky":"75421","crt_ts":1501128192000},{"col_ky":"885110","crt_ts":1501128364000},{"col_ky":"880610","crt_ts":1501128369000},{"col_ky":"326083","crt_ts":1501130957000},{"col_ky":"75421","crt_ts":1501131142000},{"col_ky":"863184","crt_ts":1501131949000}]; 


}]);

如果我可以從NG-重複到barData和標籤瓦爾控制器也許，我可以再通過關鍵和值使用barData和標籤填充條形圖。那我該怎麼做？

來源

2017-08-08 OneXer

做你想要做一些活動？這個問題並不清楚。您可以使用myData變量中的數據並顯示條形圖 –

Hi @NarenMurali。我希望將列的可見次數計入條形圖中，例如col_key 75421點擊6。我不希望從myData中輸入原始數據。 – OneXer

我檢查了你的代碼[ui-grid click event]（https://stackoverflow.com/questions/40801982/angular-ui-grid-click-event-on-selected-row）這個鏈接可以和你的ui網格集成已經創建並獲得了您需要的值，然後在事件內部創建一個for循環以遍歷myData並僅計算具有所選數據的行。希望這可以幫助。 –

我終於得到了代碼jsfiddle工作，其工作正常。該代碼顯示如何調用自定義過濾器函數。我希望這是你正在尋找的。還有一件事。，做定製過濾器的線是如此

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

的jsfiddle：https://jsfiddle.net/Kai_Draord/p3exg6rw/9/

最終輸出：

來源

2017-08-10 16:42:53

AngularJS：將ng-repeat的值傳遞給條形圖

回答

相關問題