グラフデータでクリック可能なイベントを発生させるにはどうすればいいですか

Question

私のグラフデータを使用してモデルを開こうとしています。私は多くの方法を試しましたが、私は適切な解決策を見つけませんでした。

私がしたい：

は一度クリックしたチャート内のデータの

1. クリックして、それがポップアップモデル

マイ角度

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方法を使用することができます。

イベントが 'mouseup'または 'click'タイプの場合に呼び出されます。イベントとアクティブ 要素

DEMO

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>

Answer 2

あなたは

HTML、chart-click="onClick"イベントを追加し、チャートオプションの下にイベントを設定することができます

<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'); 
    }, 

DEMO

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]; 
 

 

 
});

<!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>