Angular2 + Google Charts. Comment intégrer Google Charts dans Angular2?
Je souhaite intégrer Google Charts dans mon Angular2 application.
Quelle est la façon de le faire?
Est-il un des exemples disponibles?
J'ai essayé de charger le package comme Google Charts est démontré, mais j'ai eu des problèmes avec le chargement.
J'ai essayé angular2-google-graphique... mais n'ai pas réussi à le faire fonctionner.
Merci pour votre aide.
source d'informationauteur BuckBazooka
Vous devez vous connecter pour publier un commentaire.
Voici comment je l'ai résolu.
Maintenant tout ce que vous devez faire est d'ajouter ceci à votre index.html
33.5 KB chargé à partir de serveurs de google pour votre application.
maintenant ajouter
à votre composant et ajouter votre google chart code dans ngOnInit.
supplémentaires 35.8 KB chargé à partir de serveurs de google lorsque 'corechart' est chargé.
l'ajouter à vos composants html
<div id="piechart" style="width: 900px; height: 500px;"></div>
Une meilleure approche serait d'utiliser ViewChild au lieu de
document.getElementById('piechart')
dans le volet fichier ts.Cette solution est adaptée si vous utilisez de routage. Vous pouvez créer un
Resolver
qui permettra d'initialiser et de résoudre legoogle
objet, que vous pouvez injecter dans votre composant.D'abord, vous devez ajouter la ligne ci-dessous à la fin de index.html
Alors vous avez besoin pour créer un
Resolver
dire, nomméGoogleChartResolver
.Pour chaque itinéraire et des composants vous avez besoin d'une instance de
google
vous pouvez ajouter les lignes ci-dessous. Vous devez ajouter leGoogleChartResolver
à la liste des Observables à résoudre pour la route,Dans le
MyComponent
vous pouvez inejctActivatedRoute
et obtenir l'instance degoogle
à partir de l'instantanéToutes les ressources dépendantes de Google cartes seront chargés lors de la première fois que vous essayez de résoudre le Résolveur (ici, la première fois que vous visitez
/my-path
). Sur les résolutions suivantes, déjà résolu objet est retourné (pas de ressource d'extraction requise). En outre, cette approche charge tous les paquets à la fois.Si vous avez besoin d'optimiser davantage, vous pouvez charger différents diagramme de packages à l'aide de différents résolveurs, mais c'est peut-être trop, une solution pour la ce sera, au lieu de créer
Resolver
classes, vous pouvez obtenir l'itinéraireresolve
fonctionnalités à l'aide de la méthode de référence (dire créer une méthode statique dans un service qui fait la même chose).Si vous demandez le composant à l'aide, veuillez consulter ci-dessous ng2-google-graphiques.
https://www.npmjs.com/package/ng2-google-charts .
Il utilise en interne la loader.js bibliothèque de google afin de rendre la bibliothèque.
Vous pouvez utiliser la configuration pour les cartes à travers les entrées.