在 Angular 6 中处理来自 Google 图表的 select 事件（没有包装器，例如 ng2-google-图表！）

Question

我正在使用 Google 图表 Angular 6 没有包装器，例如 ng2-google-图表。我已经根据这个教程成功地实现了它：http://anthonygiretti.com/2017/10/12/using-google-charts-in-angular-4-project-part-2/

但是，现在我想为图表内的点击事件添加一个事件监听器。例如，当你点击一个栏时，它需要运行一些功能。

因此，根据 Google 图表文档，我需要像这样添加一个侦听器：

google.visualization.events.addListener(chart, 'select', selectHandler);

所以我补充说：

google.visualization.events.addListener(chartFunc(), 'select', this.mySelectHandler);

但是，例如，当我单击图表中的条形时，mySelectHandler 不会运行。

我看过。但是答案对我不起作用。

这些是构建图表的服务：

import { Injectable } from '@angular/core';
import { GoogleChartsBaseService } from './google-charts-base.service';
import { ChartConfigModel } from '../../models/chart-config.model';

declare var google: any;

@Injectable({
  providedIn: 'root'
})
export class ChartService extends GoogleChartsBaseService {

  constructor() { super(); }

  public buildChart(elementId: string, data: any[], config: ChartConfigModel): void {
    const chartFunc = () =>  new google.visualization.ComboChart(document.getElementById(elementId));

    this.buildGoogleChart(data, chartFunc, config);
  }
}

declare const google: any;

export class GoogleChartsBaseService {

  constructor() {
    google.charts.load('current', { 'packages': ['corechart'] });
  }

  public mySelectHandler() {
    console.log('hi');
  }

  protected buildGoogleChart(data: any[], chartFunc: any, options: any): void {
    const func = (chartFunc, options) => {
      const datatable = google.visualization.arrayToDataTable(data);
      const formatter = new google.visualization.DateFormat({ pattern: 'MMM d, yyyy | H:mm' });
      google.visualization.events.addListener(chartFunc(), 'select', this.mySelectHandler);
      formatter.format(datatable, 0);
      chartFunc().draw(datatable, options);
    };
    const callback = () => func(chartFunc, options);
    google.charts.setOnLoadCallback(callback);
  }
}

Answer 1

看来你做对了大部分。只是你的 chartFunc 总是 returns google.visualization.ComboChart 的 new 实例。所以基本上您是将事件侦听器附加到一个图表并单击另一个图表。

尝试将您从 chartFunc 获得的图表存储在一个变量中，并使用它附加事件侦听器并绘制数据。

尝试这样的事情：

declare const google: any;

export class GoogleChartsBaseService {

  constructor() {
    google.charts.load('current', { 'packages': ['corechart'] });
  }

  public mySelectHandler() {
    console.log('hi');
  }

  protected buildGoogleChart(data: any[], chartFunc: any, options: any): void {
    const func = (chartFunc, options) => {
      const datatable = google.visualization.arrayToDataTable(data);
      const formatter = new google.visualization.DateFormat({ pattern: 'MMM d, yyyy | H:mm' });
      const myChart = chartFunc();
      google.visualization.events.addListener(myChart, 'select', this.mySelectHandler);
      formatter.format(datatable, 0);
      myChart.draw(datatable, options);
    };
    const callback = () => func(chartFunc, options);
    google.charts.setOnLoadCallback(callback);
  }
}

在 Angular 6 中处理来自 Google 图表的 select 事件（没有包装器，例如 ng2-google-图表！）

Handling select event from Google Charts in Angular 6 (without wrapper such as ng2-google-charts!)

javascript

event-listener

google-visualization

typescript

angular