Как сделать метки кликными в угловой диаграмме

Question

Я пытаюсь добавить обработчик кликов на ярлыки диаграммы, которая была отображена угловой диаграммой.

Есть ли способ добавить определенный обработчик событий или использовать существующую директиву с графическим щелчком?

В настоящее время директива с графическим щелчком возвращает объект MouseEvent.

После прочтения документов я не смог найти ответ.

Answer 1

Вы можете использовать событие getPointsAtEvent, чтобы обнаружить ближайшую точку на графике и получить соответствующую метку. Проблема заключается в том, что вы не можете обнаружить щелчок непосредственно на элементе метки, как он нарисован как текст в элементе <canvas>.

Демо:

angular.module('app', ['tc.chartjs']); 
 

 
angular.module('app') 
 
.controller('AppController', function($scope) { 
 
    
 
    $scope.chart; 
 
    
 
    $scope.chartClick = function(event) { 
 
    
 
     var pointsClicked = $scope.chart.getPointsAtEvent(event); 
 
    \t if (!pointsClicked || pointsClicked.length == 0) 
 
     \t return; 
 
    
 
     if (pointsClicked[0].label) 
 
     $scope.label = 'You clicked on ' + pointsClicked[0].label; 
 
    }; 
 

 
    
 
    // Chart.js Data 
 
    $scope.data = { 
 
     labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 
 
     datasets: [ 
 
     { 
 
      label: 'My First dataset', 
 
      fillColor: 'rgba(220,220,220,0.2)', 
 
      strokeColor: 'rgba(220,220,220,1)', 
 
      pointColor: 'rgba(220,220,220,1)', 
 
      pointStrokeColor: '#fff', 
 
      pointHighlightFill: '#fff', 
 
      pointHighlightStroke: 'rgba(220,220,220,1)', 
 
      data: [65, 59, 80, 81, 56, 55, 40] 
 
     } 
 
     ] 
 
    }; 
 

 
    // Chart.js Options 
 
    $scope.options = { 
 
     // Sets the chart to be responsive 
 
     responsive: true 
 
    }; 
 

 
    
 
}); 
 

 
/** 
 
* tc-angular-chartjs - v1.0.9 - 2014-10-14 
 
* Copyright (c) 2014 Carl Craig <carlcraig@3c-studios.com> 
 
* Dual licensed with the Apache-2.0 or MIT license. 
 
*/ 
 
!function(){"use strict";function a(a){return new a}function b(a){return new a("line")}function c(a){return new a("bar")}function d(a){return new a("radar")}function e(a){return new a("polararea")}function f(a){return new a("pie")}function g(a){return new a("doughnut")}function h(){return function(a){function b(b,d,e){var f,g=d[0].getContext("2d"),h=new Chart(g),i=!1,j=!1,k=!1,l=null;for(var m in e)"chartLegend"===m?i=!0:"chart"===m?k=!0:"autoLegend"===m&&(j=!0);b.$watch("data",function(e){if(e){if(f&&f.destroy(),a)f=h[c(a)](b.data,b.options);else{if(!b.type)throw"Error creating chart: Chart type required.";f=h[c(b.type)](b.data,b.options)}i&&(b.legend=f.generateLegend()),j&&(l&&l.remove(),angular.element(d[0]).after(f.generateLegend()),l=angular.element(d[0]).next()),k&&(b.chart=f)}},!0)}function c(a){var b=a.toLowerCase();switch(b){case"line":return"Line";case"bar":return"Bar";case"radar":return"Radar";case"polararea":return"PolarArea";case"pie":return"Pie";case"doughnut":return"Doughnut";default:return a}}var d={restrict:"A",scope:{data:"=chartData",options:"=chartOptions",type:"@chartType",legend:"=chartLegend",chart:"=chart"},link:b};return d}}function i(){function a(a,b){a.$watch("legend",function(a){a&&b.html(a)},!0)}var b={restrict:"A",scope:{legend:"=chartLegend"},link:a};return b}angular.module("tc.chartjs",[]).directive("tcChartjs",a).directive("tcChartjsLine",b).directive("tcChartjsBar",c).directive("tcChartjsRadar",d).directive("tcChartjsPolararea",e).directive("tcChartjsPie",f).directive("tcChartjsDoughnut",g).directive("tcChartjsLegend",i).factory("TcChartjsFactory",h),a.$inject=["TcChartjsFactory"],b.$inject=["TcChartjsFactory"],c.$inject=["TcChartjsFactory"],d.$inject=["TcChartjsFactory"],e.$inject=["TcChartjsFactory"],f.$inject=["TcChartjsFactory"],g.$inject=["TcChartjsFactory"]}(); 
 

 
angular.bootstrap(document, [ 'app' ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js"></script> 
 

 
<div ng-controller="AppController"> 
 

 
    <canvas tc-chartjs-line chart-options="options" chart-data="data" auto-legend ng-click="chartClick($event)" chart="chart"></canvas> 
 
    <h3 ng-bind="label"></h3> 
 
    
 
</div>