javascript - 如何在图表数据上触发可点击事件

Question

我正在尝试使用我的图表数据打开模型。我尝试了很多方法，但没有找到合适的解决方案。

我想要:

1. 点击图表内的数据
2. 点击后，它应该打开一个弹出模型

我的 Angular

    app.controller('myCtrlPercent', ['$scope', '$http', function ($scope, $http) {
            $scope.labelsPercent = ['Equipment 1', 'Equipment 2', 'Equipment 3', 'Equipment 4'];
//        $scope.series = ['Hello'];
        $scope.chartOptionsPercent = {
            title: {
                display: true,
                text: "Downtime Percentage of Equipment",
                fontSize: 20
            },
            legend: {
                text: "Hello"
            },
            scales: {
                yAxes: [{id: 'y-axis-1', type: 'linear', position: 'left', ticks: {min: 0, max: 100}}],
                xAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Name of Equipment'
                    },
                gridLines: {
                    color: "rgba(0, 0, 0, 0)",
                }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Percentage of Downtime (%)'
                    },
                gridLines: {
                    color: "rgba(0, 0, 0, 0)",
                }   
            }]
            }
            }
    $scope.dataPercent = [5, 6, 7, 12];
}]);

我的 HTML

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 searchtable">

        <div id="chartStyle">
            <canvas class="chart chart-bar" chart-data="dataPercent" chart-labels="labelsPercent" chart-options="chartOptionsPercent" data-ng-click="myFunction()"></canvas>
        </div>
        <br>
    </div>

Answer 1

您可以使用onClick图表法。

Called if the event is of type 'mouseup' or 'click'. Called in the context of the chart and passed the event and an array of active elements

演示

var app = angular.module('app', ['chart.js']);

app.controller("BarCtrl", function($scope) {
   $scope.labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
   $scope.data = [
      [3, 2, 5, 1, 4, 2]
   ];
   $scope.options = {
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      },
      onClick: function(event, elem) {
         var elem = elem[0];
         if (!elem) return; // check and return if not clicked on bar/data
         // else...
         alert('clicked on bar!'); // just for test
         // modal opening code goes here...
      }
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<div ng-app="app" ng-controller="BarCtrl">
   <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-options="options"></canvas>
</div>