如何为angular js条形图添加事件

How to add events for angular js bar chart

本文关键字：条形图 添加 事件 js angular      更新时间：2023-09-26

嗨，我想为角度js条形图添加onclick事件，并获取Y轴值。如何实现这一点下面是我的代码

 <div ng-controller="BarCtrl" class="chart_contr" style="margin-left: auto;margin-right: auto;margin-top: 10%;width: 300px;padding:0px 10px;">
         <canvas id="bar" class="chart chart-bar" data="data" labels="labels" width="400" height="400"></canvas> 
                            </div>

javascript

 app.controller("BarCtrl", function ($scope) {
  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
  });

将click="onClick"（而非ng-click）属性添加到<canvas>

<canvas id="bar" class="chart chart-bar" data="data" labels="labels" width="400" height="400" click="onClick"></canvas>

将此添加到您的控制器：

  $scope.onClick = function (points, evt) {
    console.log(points[0].value); // 0 -> Series A, 1 -> Series B
  };

您可以在ng点击中访问$event，所以我认为您应该能够使用getY（）

相关文章：