Comment puis-je mettre un Google Chart Angulaire 4
Comment pouvez-vous intégrer une google chart dans angulaire 4 application?
J'ai lu la réponse à la question ici, mais je crois qu'il est incomplet. En gros, je suis d'essayer la même stratégie que la réponse précédente, à l'aide d'un GoogleChartComponent et un autre composant qui s'étend. Deux erreurs, la première est un manque d'appel à super() pour le composant enfant et la deuxième est l'appel à la "nouvelle" dans le présent code
createBarChart(element: any): any {
return new google.visualization.BarChart(element);
}
J'obtiens le message d'erreur "de google.la visualisation.BarChart n'est pas un constructeur".
Je vois l'un des commentaires mentionne également l'utilisation de <ng-content>
pour la projection de données, mais il n'est pas clairement définie.
En essayant de poser une "bonne" question, voici mon 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);
}
}
Et mon enfant composant qui s'étend:
@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);
}
}
OriginalL'auteur Frederick John | 2017-07-11
Vous devez vous connecter pour publier un commentaire.
google.visualization.BarChart
fait partie de la'corechart'
paquetbesoin de modifier l'instruction de chargement...
la
'bar'
package est pour le Matériel graphique versionce qui serait -->
google.charts.Bar
cependant, il existe de nombreuses options de configuration qui ne sont pas pris en charge par Matériel graphiques...
pour la liste complète des options non pris en charge --> Suivi de la Question pour le Matériel Graphique de la Parité de la Fonction
OriginalL'auteur WhiteHat
Je crois qu'il est de meilleure façon d'intégrer Google Chart Angulaire 4. Bibliothèque ng2-google-graphiques a déjà GoogleChartComponent. Lien vers mnp page décrit assez bien comment l'utiliser. Ci-dessous est un exemple de composant:
Et votre balisage devrait ressembler à ceci:
OriginalL'auteur ruruskyi