热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

ng-click不使用chart.js-ng-clicknotworkingwithchart.js

Icreatedapiechartwithchartjs,butwhenIclickonaspecificslice,theclickeventisnottak

I created a pie chart with chartjs, but when I click on a specific slice, the click event is not taken.

我创建了一个带有chartjs的饼图,但是当我单击特定切片时,不会执行click事件。

View:

视图:

Projects

Controller:

控制器:

'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?

我的代码出了什么问题?

Please note: I am not using angular-chart.js

请注意:我没有使用angular-chart.js

3 个解决方案

#1


9  

I studied your problem and be reading @MohammadMansoor's answer I tried to implement the solution for you.

我研究了你的问题,正在阅读@ 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);



{{hello}}

Projects

here is the plunk for the same implementation

#2


5  

Use html onclick feature and access the scope using any id

使用html onclick功能并使用任何ID访问范围

Example:


#3


3  

If you are using angular-chart please use chart-click = "chartClick".

如果您使用角度图表,请使用chart-click =“chartClick”。

I guess the chart.js overrides the click event and doesn't pass it on to angular, so you can't get a ng-click event triggered.

我猜chart.js会覆盖click事件并且不会将其传递给angular,因此您无法触发ng-click事件。

You could try binding the click event externally using angular.element('#myPieChart') but I am not sure about it.

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


推荐阅读
author-avatar
Mua--于毛毛在路上
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有