Обработка события select из Google Charts в Angular 6 (без оболочки, такой как ng2-google-charts!)

Question

Я использую Google Charts с Angular 6 без оболочки, такой как 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 не запускается, когда я нажимаю, например, на график на графике.

Я посмотрел на этот очень похожий вопрос . Но ответ не сработал для меня.

Это сервисы, которые составляют диаграмму:

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 всегда возвращает new экземпляр google.visualization.ComboChart. Таким образом, вы прикрепляете прослушиватель событий к одному графику и нажимаете на другой.

Попытайтесь сохранить диаграмму, полученную из 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);
  }
}