ng-click不使用chart.js [英] ng-click not working with chart.js
本文介绍了ng-click不使用chart.js的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用 chartjs
创建了一个饼图,
但是当我点击特定切片时,不会执行点击事件。
I created a pie chart with chartjs
,
but when I click on a specific slice, the click event is not taken.
查看:
<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));
}
//...
}
我的代码出了什么问题?
What's wrong with my code?
请注意:我没有使用 angular-chart.js
推荐答案
我研究了你的问题,正在阅读 @MohammadMansoor 的回答我试图为你实施解决方案。
I studied your problem and be reading @MohammadMansoor's answer I tried to implement the solution for you.
(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>
这篇关于ng-click不使用chart.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文