在 Angular 6 中处理来自 Google Charts 的选择事件（没有 ng2-google-charts 等包装器！）

Question

我正在使用带有 Angular 6 的 Google Charts，没有 ng2-google-charts 之类的包装器。我已经根据本教程成功实现了它：http://anthonygiretti.com/2017/10/12/using-google-charts-in-angular-4-project-part-2/

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

所以，根据 Google Chart 文档，我需要像这样添加一个监听器：

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

所以我补充说：

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

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

我看过this very similar question。但答案对我不起作用。

这些是构建图表的服务：

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 总是返回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);
  }
}