ng-click与chart.js无法正常工作

Question

我使用 chartjs 创建了一个饼图，但是当我点击特定的扇形时，点击事件没有被触发。

<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

- eeadev

---

你能否在控制台中发布你所遇到的错误？ - Amit Ramoliya

控制台没有错误，只是它没有对点击事件做出反应。 - eeadev

请发布您的完整视图，不清楚您是否已正确加载了Angular，例如是否包含了ng-app。 - Jim Aho

Answer 1

我看了一下你的问题，并阅读了@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>

这里是与同一实现相关的plunk

- Minato

---

你能否看一下我的问题：https://dev59.com/45ffa4cB1Zd3GeqP3BpQ - Abderrahim

Answer 2

使用HTML的onclick功能，并通过任何ID访问作用域。

示例：

<canvas id="myPieChart" width="600" height="600" onclick="angular.element("#myPieChart").scope().chartClick();"></canvas>

- Mohammed mansoor

---

在这种情况下，您如何获取切片的标签？ - eeadev

当我点击myPieChart的每个片段时，如何在我的控制器中获取对所点击的片段的引用？例如，如果我想获取一些数据值，其中数据为[ { value: 300, color:"#F7464A", highlight: "#FF5A5E", label: "Red" }...， - eeadev

你可以像这样传递参数：angular.element("#myPieChart").scope().chartClick('test_arg'); 在 Angular 函数内部，你可以像平常一样获取它。如果不起作用，请尝试不使用单引号。 - Mohammed mansoor

请您编辑您的回复，同时添加在控制器中使用的函数？非常感谢。 - eeadev

Answer 3

如果您正在使用angular-chart，请使用chart-click = "chartClick"。

我猜想chart.js覆盖了点击事件，没有将其传递给angular，因此您无法触发ng-click事件。

您可以尝试使用外部绑定点击事件，使用angular.element('#myPieChart')，但我不确定。

- Minato

---

你应该使用它，它有非常方便的功能，并且是 chart.js 的一个封装。 - Minato