如何在Angular 4中添加Google图表

Question

如何在角度4应用程序中集成谷歌图表？

我在这里阅读了SO问题的答案,但我认为它不完整.基本上,我正在尝试与之前的答案相同的策略,使用GoogleChartComponent和扩展它的另一个组件.出现两个错误,第一个是对子组件的super()缺少调用,第二个是在此代码中调用"new"

  createBarChart(element: any): any {
      return new google.visualization.BarChart(element);
  }

我收到错误"google.visualization.BarChart不是构造函数".

我看到其中一条评论也提到了<ng-content>数据投影的使用,但没有明确概述.

在尝试提出一个"好"的问题时,这是我的GoogleChartComponent:

export class GoogleChartComponent implements OnInit {
  private static googleLoaded: any;
  constructor() {
    console.log('Here is GoogleChartComponent');
  }

  getGoogle() {
    return google;
  }

  ngOnInit() {
    console.log('ngOnInit');
    if (!GoogleChartComponent.googleLoaded) {
      GoogleChartComponent.googleLoaded = true;
      google.charts.load('current', {
        'packages': ['bar']
      });
      google.charts.setOnLoadCallback(() => this.drawGraph());
    }
  }

  drawGraph() {
      console.log('DrawGraph base class!!!! ');
  }

  createBarChart(element: any): any {
      return new google.visualization.BarChart(element);
  }

  createDataTable(array: any[]): any {
      return google.visualization.arrayToDataTable(array);
  }
}

我的子组件扩展了它:

@Component({
  selector: 'app-bitcoin-chart',
  template: `
   <div id="barchart_material" style="width: 700px; height: 500px;"></div>
  `,
  styles: []
})
export class BitcoinChartComponent extends GoogleChartComponent  {
 private options;
  private data;
  private chart;
  // constructor() {
  //   super();
  //   console.log('Bitcoin Chart Component');
  // }
  drawGraph() {
    console.log('Drawing Bitcoin Graph');
    this.data = this.createDataTable([
     ['Price', 'Coinbase', 'Bitfinex', 'Poloniex', 'Kraken'],
     ['*', 1000, 400, 200, 500]
    ]);

    this.options = {
     chart: {
                    title: 'Bitcoin Price',
                    subtitle: 'Real time price data across exchanges',
                },
                bars: 'vertical' // Required for Material Bar Charts.
    };

    this.chart = this.createBarChart(document.getElementById('barchart_material'));
    this.chart.draw(this.data, this.options);
  }
}

Answer 1

google.visualization.BarChart是'corechart'套餐 的一部分

需要更改加载语句...

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

该'bar'包适用于材质图表版本
，即 -->google.charts.Bar

但是，有许多配置选项不受材质图表支持......

有关不支持选项的完整列表 -->材料图表功能奇偶校验的跟踪问题