如何使用带有 Typescript 的 angularjs 将事件添加到 google 图表？

Question

我正在使用 ColumnChart 并想在图表中的单个列上添加点击事件。我正在使用 angularjs 和 ng-google-chart.js 指令和 Typescript。

下面是我如何初始化图表：

$scope.chart = {};
$scope.chart.type = "ColumnChart";
$scope.chart.cssStyle = "";

$scope.$watch("data", () => {
$scope.chart.data = {
   //column and row definition
   };
});
$scope.chart.options = {
   //some chart options
   enableInteractivity: true,
   displayExactValues: true,
};
$scope.chart.formatters = {};
google.visualization.events.addListener(chart, 'select', () => {
   alert("select event");
});

事件永远不会触发，也不会显示任何错误。我是否忘记了图表初始化？

Answer 1

您将 Google 图表 API 和指令混在一起太多了。您在范围内的图表对象不是 Google 图表 API 识别的对象。您可以将 on-select 属性与 angular-google-chart 一起使用来实现您想要的。

$scope.selectHandler = function (selectedItem) {
  // Your logic here.
};

<!-- selectedItem is injected by name used here, so must be spelled correctly. -->
<div google-chart chart="chart" on-select="selectHandler(selectedItem)"></div>

您可以在 Hiding a Series 上我的博客 post 中找到更实际的示例。

您可以将作用域中的图表对象视为构建 google 图表的模板，但底层库无法识别它本身。但是，当您深入研究源代码时，所有概念都会紧密对应。它们只是不符合对象引用。

如何使用带有 Typescript 的 angularjs 将事件添加到 google 图表？

How to add a event to google chart using angularjs with Typescript?

charts

google-visualization

angularjs