javascript - Angular Controller 中的 chart.js chart-click 传递参数

标签 javascript angularjs charts chart.js angular-chart

我正在使用 chart.js/angular-chart.js 在饼图中显示一些数据。

我需要这样的功能,当用户单击图表饼图内的标签时,单击事件将复制选定的图表值。

我可以通过这个 Action 触发事件:

$scope.chartClick = function() {
               alert('ok');
           }

这是我的标记:

 <canvas id="pie" class="chart chart-pie"
                  chart-data="data" chart-labels="labels" display="true" chart-click="chartClick()" chart-options="options"></canvas> 

知道如何将一些参数传递给该事件以实际获取值吗?

编辑

完全 Controller :

.controller('InvestorLtvReportController', [
    '$scope', '$http', '$state', function ($scope, $http, $state) {
        $scope.labels = [];
        $scope.data = [];
        $scope.options = {
            legend: {
                display: true,
                position: 'bottom',
                labels: {
                    fontColor: 'rgb(255, 99, 132)'
                }
            }
        };

        $scope.chartClick = function (points, evt) {
            console.log(points, evt);
        };

        $http({
                url: 'http://myapi/api/Manage/GetUserRole',
                method: "GET"
            }).success(function (data, status) {
                $scope.isInvestor = false;
                angular.forEach(data, function (value, key) {
                    if (value == 'Investor') {
                        $scope.isInvestor = true;
                    }
                });

                if (!$scope.isInvestor) {
                    $state.go('accountlogin');
                } else {
                    $http({
                        url: 'http://myapi/api/investor/GetInvestorLtvReport',
                        method: "GET"
                    }).success(function (data, status) {

                        angular.forEach(data, function (value, key) {
                            $scope.labels.push(value.Amortisation);
                            $scope.data.push(value.PercOfFund);
                        });
                    }).error(function (data, status) {
                        console.log(data);
                    });
                }
            })
    }
])

最佳答案

你可以这样做,

<canvas id="pie" chart-click="onClick" class="chart chart-pie"chart-data="data" chart-labels="labels"></canvas> 

Controller :

app.controller('AppCtrl', ['$scope', function($scope){
  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
  $scope.data = [300, 500, 100];
   $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };
}]); 

DEMO

关于javascript - Angular Controller 中的 chart.js chart-click 传递参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40349102/

相关文章:

javascript - 为什么检索方法在这里不起作用?

angularjs - Ui-sref和md-button。这个怎么运作?

charts - Chart.js 总是在 Chart.resize() 上增加高度

javascript - 如何在 highcharts 中加载外部 json 数据以显示条形图

javascript - 当翻译在另一个集合中时,如何在 MongoDB 上处理 i18n(带回退)?

javascript - 为什么高阶函数隐藏我的 ES6 类属性?

angularjs - 通过 AngularAMD 将 AngularJS 与 RequireJS 结合使用 : Cannot read property 'directive' of undefined

android - 有没有办法在 iOS 版本的 MPAndroidChart 框架中处理手势结束(触摸)?

javascript - 使用 forEach() 返回数组值

javascript - 将包含html的动态变量从angularjs加载到jade模板