[英]ng-click not working with chart.js
我創建了一個帶有chartjs
的餅圖,但是當我單擊特定切片時,不會執行click事件。
視圖:
<div ng-controller="ProjectsController">
<a>Projects</a>
<br>
</br>
<canvas id="myPieChart" width="600" height="600" ng-click="chartClick()"></canvas>
控制器:
'use strict';
angular.module('Progs')
.controller('ProjectsController', ['$scope', '$rootScope', '$http', '$window', '$state',
function ($scope, $rootScope, $http, $window, $state) {
//...
$scope.chartClick = function (event) {
console.log('chartClick');
//console.log("segment: " + $scope.chart.getSegmentsAtEvent(event));
}
//...
}
我的代碼出了什么問題?
請注意:我沒有使用angular-chart.js
我研究了你的問題並且正在閱讀@MohammadMansoor的回答我試圖為你實現解決方案。
(function(angular) { var app = angular.module("app", []); app.controller("ChartCtrl", ['$scope', function($scope) { $scope.hello = "Hello, World"; $scope.canvas = document.getElementById("myPieChart"); $scope.ctx = $scope.canvas.getContext("2d"); $scope.data = [{ value: 300, color: "#F7464A", highlight: "#FF5A5E", label: "Red" }, { value: 50, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" }, { value: 100, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" }]; $scope.myPieChart = new Chart($scope.ctx).Pie($scope.data,{}); $scope.chartClick = function (event) { console.log('chartClick'); console.log($scope.myPieChart.getSegmentsAtEvent(event)); } $scope.canvas.onclick = $scope.chartClick; }]); })(angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> <div ng-app="app" ng-controller="ChartCtrl"> <h1>{{hello}}</h1> <a>Projects</a> <br> <canvas id="myPieChart" width="600" height="600"></canvas> </div>
使用html onclick功能並使用任何ID訪問范圍
<canvas id="myPieChart" width="600" height="600" onclick="angular.element("#myPieChart").scope().chartClick();"></canvas>
如果您使用angular-chart
請使用chart-click = "chartClick"
。
我想chart.js
會覆蓋click事件並且不會將其傳遞給angular,因此您無法觸發ng-click
事件。
您可以嘗試使用angular.element('#myPieChart')
在外部綁定click事件,但我不確定。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.