[英]How do I put a Google Chart in Angular 4
如何在角度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);
}
}
我相信有更好的方法可以在Angular 4中集成Google Chart。库ng2-google-charts已经有了GoogleChartComponent。 链接到npm页面很好地描述了如何使用它。 以下是组件的示例:
import {Component, ViewEncapsulation, OnInit} from '@angular/core';
import {Component, ViewEncapsulation, OnInit} from '@angular/core';
import {Component, ViewEncapsulation, OnInit} from '@angular/core';
import {ViewChild} from '@angular/core';
import {GoogleChartComponent} from 'ng2-google-charts';
// needed for advanced usage of ng2-google-charts
import {HostListener} from '@angular/core';
@Component({
selector: '[your-widget]',
templateUrl: './your-widget.html',
encapsulation: ViewEncapsulation.None
})
export class YourWidget implements OnInit {
// type GoogleChartComponent and import for it can be ommited
@ViewChild('your_chart') chart: GoogleChartComponent;
// shows spinner while data is loading
showSpinner: boolean;
public chartData = {
chartType: 'AnyChartType', // your type
dataTable: [
['Col1', 'Col2']
],
options: {}
};
constructor() {
}
ngOnInit(): void {
this.showSpinner = true;
this.yourService.getData()
.subscribe((data) => {
//this.data = data;
this.processYourData();
this.showSpinner = false;
});
}
private processYourData() {
}
// advanced usage of chart
// in this case redraw function on window:resize event
@HostListener('window:resize', ['$event'])
onWindowResize(event: any) {
// console.log(event.target.innerWidth);
// Make sure you don't call redraw() in ngOnInit()
// - chart would not be initialised by that time, and
// - this would cause chart being drawn twice
this.chart.redraw();
}
}
你的标记看起来像这样:
<header class="widget-handle">
<h5>Widget Title</h5>
<div class="widget-controls">
<a title="Refresh">
<i *ngIf="showSpinner" class="fa fa-refresh fa-spin"></i>
</a>
</div>
</header>
<div class="widget-body">
<google-chart #your_chart [data]="chartData" *ngIf="!showSpinner">
</google-chart>
</div>
google.visualization.BarChart
是'corechart'
包的一部分
需要更改加载语句...
google.charts.load('current', {
'packages': ['corechart']
});
'bar'
包用于Material图表版本
这将是 - > google.charts.Bar
但是,有很多配置选项, 材料图表不支持...
有关不受支持的选项的完整列表 - > 跟踪物料图表特征奇偶校验的问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.