Dobut Click 事件在 AngularJS 中
Dobut Click event in AngularJS
我已经在我的文件中集成了一个圆环图。我想要甜甜圈的每个切片上的点击事件。我不知道如何进行点击事件。这是我的代码
<!DOCTYPE html>
<html ng-app="MyApp" >
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="angular-chart.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MyCtrl">
<div class="col-sm-6">
<canvas id="doughnut" class="chart chart-doughnut" data="polarData.data" labels="polarData.labels" legend="true">
</canvas>
</div>
<script>document.write("<base href='"" + document.location + "'" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"></script>
<script type="text/javascript" src="Chart.js"></script>
<script type="text/javascript" src="angular-chart.js"></script>
<script src="app.js"></script>
</body>
</html>
这是我的JS文件
var app = angular.module("MyApp", ["ngAnimate", "angular-chart"]);
app.controller('MyCtrl', function($scope, $timeout) {
$scope.name = '';
$scope.data = {
singleSelect: null,
multipleSelect: [],
option1: 'option-1',
};
$scope.forceUnknownOption = function() {
$scope.data.singleSelect = 'nonsense';
};
$scope.polarData = {
labels: ["January", "February", "March", "April"],
data: [50, 50, 50, 50],
};
});
您需要
在画布上添加chart-click="onClick"
属性。
并将此方法添加到您的控制器
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
详情如下: http://jtblin.github.io/angular-chart.js/#doughnut-chart
相关文章:
- $window.ga在AngularJS事件中未定义
- 如何在所有ng点击事件AngularJS上启动一个方法
- AngularJS-如何只对多个事件的组合采取行动
- 点击AngularJS模态窗口捕捉背景事件
- AngularJs的ng-click$事件将子元素作为目标传递
- Angularjs:从多个控制器捕获事件
- Angularjs事件与发布/订阅指令之间的通信
- 视图焦点的AngularJS事件
- JavaScript 表单如何提交 fire angularjs 事件
- 如何在关闭浏览器或窗口时触发 Angularjs 事件
- AngularJS 事件,用于触摸等效于鼠标悬停
- AngularJS事件,在应用所有作用域后触发
- 如何将 AngularJS 事件重新广播到子范围
- 使用jasmin对AngularJS$事件进行单元测试
- AngularJS:事件回调不会在google maps原生地图标记上触发
- AngularJs事件$stateChangeStart未触发
- 占位符求值后的AngularJS事件
- AngularJS事件处理程序不启动
- 如何安全地清理指令中的AngularJS事件绑定
- TypeScript angularjs 事件绑定