Question

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

我想：

点击图表中的数据
点击后，它应该会打开一个弹出模型

我的角色

    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

您可以添加 chart-click="onClick" 事件，并在图表选项下配置该事件，

<强> HTML

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

<强>控制器：

 onClick: (point, elements) => {
      alert('open Modal');
    },

<强>样本

＆＃13;

angular.module("app", ["chart.js"])


.controller("ChartCtrl", function($scope) {
  $scope.labelsPercent = ['Equipment 1', 'Equipment 2', 'Equipment 3', 'Equipment 4'];
  $scope.chartOptionsPercent = {
    title: {
      display: true,
      text: "Downtime Percentage of Equipment",
      fontSize: 20
    },
    legend: {
      text: "Hello"
    },
    tooltips: {
      enabled: false
    },
    onClick: (point, elements) => {
     var chartele= elements[0];
     if (!chartele)
     {
         return;
     }
     else{        
         alert('open modal!');
      }
    },
    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];


});

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title>radar Chart</title>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>   
</head>
<body ng-app="app">
  <div ng-controller="ChartCtrl" style="width:360px">
       <canvas class="chart chart-bar"  chart-click="onClick" chart-data="dataPercent" chart-labels="labelsPercent" chart-options="chartOptionsPercent"  ></canvas>
  </div>
 </body>
</html>

＆＃13;

Answer 2

您可以使用图表的onClick方法。

如果事件是“mouseup”或“click”类型，则调用。叫做图表的上下文并传递了事件和一组活动的元素

<强>样本

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>

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

2 个答案: