Question

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

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

$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 Charts API和指令混合得太多了。范围内的图表对象不是Google Charts API识别的对象。您可以使用带有angular-google-chart的on-select属性来实现您想要的效果。

$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上的博文中找到更实用的示例。

您可以将放在范围内的图表对象视为构建Google图表的模板，但它本身无法被底层库识别。但是，当您深入研究源代码时，所有概念都会紧密映射。它们只是不符合对象引用。

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

1 个答案: