Construire un composant de graphique avec Angular 2 et FusionCharts-js tutoriel-php.cn

Construire un composant de graphique avec Angular 2 et FusionCharts

Les plats clés

Utiliser Angular 2 pour la construction de composants du graphique, en tirant parti de ses améliorations par rapport à Angular 1.x, y compris un support linguistique amélioré et la gestion DOM.
Intégrer FusionCharts à Angular 2 pour créer des graphiques visuellement attrayants, malgré l'absence d'un plugin Angular 2 dédié, en codant directement avec JavaScript.
Développer un composant de graphique dynamique capable de basculer entre les ensembles de données (par exemple, les statistiques de revenus 2014 et 2015 pour les grandes sociétés technologiques), l'amélioration de l'interactivité et de l'engagement des utilisateurs.
Utilisez la fonction d'annotations de FusionCharts pour personnaliser les graphiques, tels que l'ajout de logos d'entreprise aux axes de graphique, qui offre une expérience visuelle sur mesure.
Explorez d'autres fonctionnalités et possibilités d'intégration avec Angular 2 et FusionCharts, encourageant les lecteurs à développer le composant de graphique de base avec des configurations et des types de graphiques plus complexes.

Cet article a été revu par des pairs par Vildan Softic. Merci à tous les pairs examinateurs de SitePoint pour avoir fait du contenu SitePoint le meilleur possible!

En tant que développeur Web, s'il y a quelque chose que vous ne pouvez pas manquer, il est Angular 2. C'est une réécriture complète du framework JavaScript populaire de Google et est constamment dans les nouvelles pour toutes les bonnes raisons. Il offre des améliorations majeures par rapport aux versions précédentes et c'est pourquoi nous le choisissons aujourd'hui pour construire de beaux graphiques.

Pour les graphiques, nous utiliserons la bibliothèque de graphiques JavaScript fournie par FusionCharts. Il propose une bonne collection de graphiques et est compatible avec tous les principaux navigateurs. Bien que FusionCharts propose un plugin dédié à Angular, il n'est pas encore compatible avec Angular 2. Je ne vais donc pas l'utiliser et plutôt coder directement en utilisant JavaScript et Angular 2. ( Remarque: Il est recommandé d'utiliser le plugin si Vous utilisez Angular 1 dans votre application ).

Le graphique que nous allons complot représentera une statistique intéressante - les revenus de cinq grandes entreprises technologiques (Amazon, Apple, Facebook, Google et Microsoft) et auront une option pour basculer entre les données de revenus pour 2014 et 2015. Nous. passera d'abord par le processus étape par étape de création de graphiques dans Angular 2. Après avoir construit un graphique de base, nous couvrirons certains sujets avancés tels que l'ajout d'annotations et de mise à jour des données du graphique.

Comme jamais, vous pouvez télécharger le code pour ce tutoriel à partir de notre réapprovisionnement GitHub, ou vous pouvez sauter à une démo du graphique fini à la fin de l'article.

angulaire 2 vs angulaire 1.x

Angular 2 a des changements significatifs par rapport à sa version majeure précédente (Angular 1.x), par exemple sa prise en charge des langages tels que TypeScript et Dart, et la façon dont il calcule les mises à jour du DOM. Si vous souhaitez en savoir plus sur la façon dont les concepts et techniques Angular 1 mappent à Angular 2, vous pouvez consulter la référence rapide officielle. Si vous êtes intéressé à migrer votre application d'Angular 1.x à Angular 2, vous pouvez lire le guide de migration officiel.

Bien qu'Angular 2 prenne en charge TypeScript et Dart, nous utiliserons JavaScript natif pour écrire l'application Angular 2 dans ce tutoriel en raison de sa familiarité. L'utilisation de TypeScript ou Dart introduirait également une étape de construction inutile.

Configuration

Il existe un certain nombre de façons de se présenter avec un projet Angular 2. Le plus simple est probablement de se diriger vers le site officiel et de suivre leur tutoriel de 5 minutes Quickstart.

Une légère mise en garde à cette approche cependant, c'est qu'il s'appuie sur le fait que vous ayez un nœud et un NPM installés sur votre machine. Nous avons un guide pour cela, mais si vous préférez suivre ce tutoriel sans les installer, vous pouvez utiliser le modèle suivant:

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title</span>></span>Angular 2 FusionCharts Demo<span><span></title</span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link</span> href<span>='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300'</span> rel<span>='stylesheet'</span>></span>
</span>
    <span><!-- 2. Load Angular 2 specific libraries -->
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script</span> src<span>="https://static.fusioncharts.com/code/latest/fusioncharts.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script</span> src<span>='main.js'</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart</span>></span>Loading...<span><span></angular-chart</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

Copier après la connexion

Création du composant du graphique

Les composants

sont les éléments constitutifs de toute application Angular 2. Ce sont des pièces de code réutilisables composées d'une vue et d'une logique. Si vous connaissez Angular 1, vous pouvez les considérer comme des directives avec un modèle et un contrôleur.

Voici la base de notre composant de graphique:

<span>(function(chartApp){
</span>  chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({
</span>    <span>selector: 'angular-chart',
</span>    <span>template: '<div>Chart will render here</div>'
</span>  <span>}).<span>Class</span>({
</span>    <span>constructor: function(){}
</span>  <span>});
</span>
  <span>document.addEventListener('DOMContentLoaded', function() {
</span>    ng<span>.platform.browser.bootstrap(chartApp.<span>AppComponent</span>);
</span>  <span>});
</span><span>})(window.chartApp || (window.chartApp = {}));
</span>

Copier après la connexion

Prenons une seconde pour voir ce qui se passe.

Nous commençons par un iife (expression de fonction immédiatement invoquée) que nous utilisons pour l'espace de noms notre application. Nous le passons Window.ChartApp comme un argument, qui est initialisé dans un objet vide s'il n'est pas défini. C'est là que notre application va vivre - dans une seule propriété sur l'objet global.

À l'intérieur de l'IIFE, nous créons notre composant (AppComponent) en enchaînant les méthodes de composant et de classe à partir de Ng.Core (une collection de composants principaux d'Angular). Nous passons la méthode des composants Un objet de configuration contenant les prométies suivantes:

Sélecteur: un sélecteur CSS simple qui spécifie un élément HTML hôte. Angular créera et affichera une instance du composant chaque fois qu'il rencontre un élément HTML correspondant à ce sélecteur.
Modèle: le modèle à utiliser lorsque le composant est rendu. Actuellement, nous passons une chaîne contenant un élément
d'espace réservé, mais idéalement, nous devons le déplacer dans son propre modèle.
La méthode de classe est l'endroit où nous ajoutons le comportement et les liaisons d'événements pour le modèle.

Ayant défini notre composant de base, nous l'initialisons en utilisant la fonction de bootstrap du navigateur d'Angular.

Vous devriez pouvoir exécuter le code dans votre navigateur à ce stade et voir le message «Le graphique sera rendu ici».

Création du graphique

Passons à la création du graphique et à l'affichage de certaines données pour 2014.

Pour ce faire, nous devons utiliser la fonction de constructeur FusionCharts à laquelle nous passons un objet contenant tous les paramètres de configuration pour l'instance de graphique:
- Type: Le type de graphique que nous souhaitons créer
- Renderat: le sélecteur DOM dans lequel notre graphique sera rendu
- Largeur et hauteur: les dimensions du graphique
- ID: L'ID du graphique généré
- DataFormat: le format des données transmises à l'option de source de données
- DataSource: la configuration du graphique réel, ainsi que les données qu'il doit afficher
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Angular 2 FusionCharts Demo</title>  <link rel="stylesheet" href="styles.css"> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet'>  <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"></script>  <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>  <script src='main.js'></script> </head> <body>  <angular-chart>Loading...</angular-chart> </body> </html> 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Voici le fichier de configuration complet.

Si vous n'êtes pas sûr de ce que font réellement l'une des options de graphique, ou si vous souhaitez savoir comment l'apparence du graphique peut être configurée, vous pouvez vous référer à la page d'attributs du graphique dans la documentation FusionCharts.

L'autre chose que nous devons faire est de mettre à jour notre modèle pour inclure le conteneur dans lequel notre graphique devrait rendre. Vous pouvez soit le faire en spécifiant une chaîne à la propriété du modèle du composant (comme nous l'avons fait précédemment), soit en déplaçant le modèle dans son propre fichier et en le faisant référence à l'aide de modèle.
(function(chartApp){ chartApp.AppComponent = ng.core.Component({ selector: 'angular-chart', template: '<div>Chart will render here</div>' }).Class({ constructor: function(){} }); document.addEventListener('DOMContentLoaded', function() { ng.platform.browser.bootstrap(chartApp.AppComponent); }); })(window.chartApp || (window.chartApp = {})); 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
De toute façon, c'est à quoi devrait ressembler notre modèle.
new FusionCharts({ "type": "column2d", "renderAt": "chart-container", "width": "550", "height": "400", "id": "revenue-chart", "dataFormat": "json", "dataSource": { "chart": { "yAxisName": "Revenue (In USD Billion)", "yAxisMaxValue": "200", ... }, "data": [{ "label": "Amazon", "value": "88.99" }, { "label": "Apple", "value": "182.8" } ... ] } }); 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Voici une démo de ce que nous avons jusqu'à présent:
Chargement Plunk…
Vous pouvez afficher le code de cette démo sur Plunker.

Si vous cliquez sur la démo sur Plunker, dans le fichier main.js, vous remarquerez peut-être que nous avons séparé les données de configuration de FusionCharts dans son propre fichier, que nous allons ensuite chercher la classe HTTP d'Angular. Ceci est pour la clarté (cela rend le code spécifique angulaire plus facile à suivre) et aussi parce que faire une demande de données est ce que vous feriez généralement dans un scénario de la vie réelle.

Cependant, ce n'est pas absolument nécessaire, et vous obtiendrez le même résultat en faisant tout directement dans le constructeur ChartApp:
```
chartApp.AppComponent = ng.core.Component({
 selector: 'angular-chart',
 templateUrl: 'chart.html'
}).Class({
 ...
});

```
Copier après la connexion
Copier après la connexion
La seule autre chose à mentionner est que le code d'initialisation est enveloppé dans la méthode FusionChart.ready. Cela garantit que votre code d'instanciation de graphique est appelé avant la charge de la bibliothèque FusionCharts.

Avec le graphique de base prêt, il est temps d'ajouter plus de fonctionnalités, comme l'utilisation de logos d'entreprise au lieu de noms et de mettre à jour le graphique avec de nouvelles données pour l'année 2015.

Ajout d'annotations

Pour ajouter des logos d'entreprise à l'axe X, nous utiliserons l'une des fonctionnalités puissantes de FusionCharts - annotations . Les annotations sur un objet FusionCharts vous permettent de dessiner des formes ou des images personnalisées à des positions désignées sur le graphique.

Supposons que vous souhaitiez ajouter le logo de votre entreprise au centre du graphique. Vous pouvez le faire en utilisant des annotations et des macros. Les macros vous donneront les coordonnées du centre du graphique et l'annotation vous permettra d'ajouter une image à cet endroit.

Les choses deviennent intéressantes lorsque vous utilisez des annotations dynamiques pour, par exemple, obtenir des informations sur les positions qui dépendent des données du graphique. Imaginez que vous voulez dessiner quelque chose exactement où se termine la colonne. Vous pouvez utiliser la dynamique annotation macro $ dataset.0.set.1.endx et $ dataset.0.set.1.endy pour déterminer les coordonnées x et y du point final de la colonne, puis dessinez quelque chose là-bas. Vous pouvez en savoir plus sur les annotations et comment les utiliser sur cette page de documentation FusionCharts.

Pour notre graphique, nous utiliserons les macros d'annotation dynamique pour obtenir les coordonnées de démarrage et de fin de chaque colonne, où nous allons ensuite dessiner les logos d'entreprise respectifs. Nous désactiverons également les étiquettes de l'axe X par défaut à l'aide de l'attribut de graphique "showLabels": "0".

Pour atteindre les objectifs ci-dessus, ajoutez le code suivant à la configuration du graphique:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Angular 2 FusionCharts Demo</title>  <link rel="stylesheet" href="styles.css"> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet'>  <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"></script>  <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>  <script src='main.js'></script> </head> <body>  <angular-chart>Loading...</angular-chart> </body> </html> 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
dans le code ci-dessus:
- Le type définit le type d'annotation.
- URL définit l'adresse de l'image.
- x et y définissent les coordonnées x et y de départ des images.
Après avoir ajouté le code ci-dessus, vous devriez voir les logos de l'entreprise rendues sur l'axe X. Pour en savoir plus sur l'utilisation des annotations et ce qui est possible, veuillez vous référer à la page de documentation (mentionnée ci-dessus).

Basculement entre les ensembles de données

La dernière chose que nous voulons mettre en œuvre est de permettre à l'utilisateur de basculer entre les années, en voyant un ensemble de données différent en fonction de l'année sélectionnée (2014 ou 2015).

structurer les données.

Nous devons donc examiner comment structurer nos données de manière à définir différents ensembles de données pour les différentes années. Comme mentionné précédemment, FusionCharts s'attend à ce que les options de configuration contiennent une propriété de données, qui devrait être un tableau contenant des ensembles de paires d'étiquettes / valeur.
(function(chartApp){ chartApp.AppComponent = ng.core.Component({ selector: 'angular-chart', template: '<div>Chart will render here</div>' }).Class({ constructor: function(){} }); document.addEventListener('DOMContentLoaded', function() { ng.platform.browser.bootstrap(chartApp.AppComponent); }); })(window.chartApp || (window.chartApp = {})); 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Une façon de gérer plusieurs ensembles de données serait de définir un objet de jeu de données en haut de notre fonction de constructeur et de le fixer au constructeur à l'aide d'un alias.
new FusionCharts({ "type": "column2d", "renderAt": "chart-container", "width": "550", "height": "400", "id": "revenue-chart", "dataFormat": "json", "dataSource": { "chart": { "yAxisName": "Revenue (In USD Billion)", "yAxisMaxValue": "200", ... }, "data": [{ "label": "Amazon", "value": "88.99" }, { "label": "Apple", "value": "182.8" } ... ] } }); 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Ensuite, dans les options de configuration que nous passons au constructeur FusionCharts, nous pouvons faire:
```
chartApp.AppComponent = ng.core.Component({
 selector: 'angular-chart',
 templateUrl: 'chart.html'
}).Class({
 ...
});

```
Copier après la connexion
Copier après la connexion
Mise à jour des données du graphique sur Toggle

Nous voulons également que le graphique soit mis à jour avec les données pour 2015 une fois que quelqu'un cliquera sur le bouton 2015 et retournez à l'affichage des données pour 2014, lorsque le bouton 2014 est cliqué sur .

Ajoutons les deux boutons, qui seront utilisés pour effectuer cette action et leur donner un style. Modifier le modèle de composant comme suit:
```
<div class="container">
 <h1>Revenue of Top Tech Companies (2014)</h1>
 <div id ="chart-container"></div>
</div>

```
Copier après la connexion
Remarquez la nouvelle syntaxe pour ajouter un auditeur d'événements et ajouter la directive NGClass dans Angular 2. Ils sont presque les mêmes qu'angulaires 1, à moins certains accolades et parenthèses.

J'ai ajouté une directive NGClass pour mettre en surbrillance l'année sélectionnée en cours en appliquant une classe CSS sélectionnée à l'élément bouton. Ceci est basé sur la propriété sélectionnée sur le composant qui est mis à jour sur le clic des boutons.

Nous pouvons définir l'année sélectionnée en cours 2014 lorsque le composant rend en ajoutant la ligne suivante au sommet du constructeur:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Angular 2 FusionCharts Demo</title>  <link rel="stylesheet" href="styles.css"> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet'>  <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"></script>  <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>  <script src='main.js'></script> </head> <body>  <angular-chart>Loading...</angular-chart> </body> </html> 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
La logique pour gérer les clics du bouton sera ajoutée à une nouvelle fonction d'année.
(function(chartApp){ chartApp.AppComponent = ng.core.Component({ selector: 'angular-chart', template: '<div>Chart will render here</div>' }).Class({ constructor: function(){} }); document.addEventListener('DOMContentLoaded', function() { ng.platform.browser.bootstrap(chartApp.AppComponent); }); })(window.chartApp || (window.chartApp = {})); 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Pour cela, nous allons utiliser la méthode SetChartData de FusionChart qui nécessite à la fois les options de configuration du graphique et les données réelles du graphique. Au lieu de stocker d'abord les attributs du graphique, puis de les référencer, nous obtiendrons les attributs du graphique à partir du graphique qui est déjà rendu, en utilisant la méthode Getchartdata et modifier ces données avec des données spécifiques à l'année.
new FusionCharts({ "type": "column2d", "renderAt": "chart-container", "width": "550", "height": "400", "id": "revenue-chart", "dataFormat": "json", "dataSource": { "chart": { "yAxisName": "Revenue (In USD Billion)", "yAxisMaxValue": "200", ... }, "data": [{ "label": "Amazon", "value": "88.99" }, { "label": "Apple", "value": "182.8" } ... ] } }); 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Après avoir ajouté le HTML pour les boutons et le gestionnaire de clics ci-dessus pour ces boutons, cliquer sur ces boutons devrait charger les données de cette année pour le graphique.

démo

et voici la démo finale.
Chargement Plunk…
Vous pouvez afficher le code de cette démo sur Plunker. Ou vous pouvez télécharger le code à partir de notre repo github.

Si vous cliquez sur le Plunker, vous verrez que nous avons défini directement la propriété de l'ensemble de données dans le fichier config.json. Cela maintient les choses beaucoup plus tristes dans notre composante.

Conclusion et étapes suivantes

Nous avons commencé par construire un graphique angulaire simple, puis nous y avons ajouté plus de fonctionnalités en utilisant des annotations et d'autres API de FusionCharts. Mais ce n'est que la pointe de l'iceberg et beaucoup plus peut être fait en utilisant à la fois Angular 2 et FusionCharts. Certaines choses que vous pouvez explorer par vous-même:
- Inclure plus de graphiques: un graphique de colonnes n'est pas toujours le meilleur moyen de représenter un ensemble de données. Selon votre cas d'utilisation, vous voudrez peut-être utiliser différents graphiques comme la cascade, le radar, la jauge, etc. Alors, essayez d'utiliser le processus expliqué dans ce tutoriel pour tracer un graphique différent et voir si vous êtes en mesure de le faire avec succès.
- Inclure des graphiques dans votre application: si vous êtes à créer des applications mobiles hybrides, vous devez être conscient que Ionic 2 (dernière version d'Ionic) est basé sur Angular 2. Et c'est une bonne nouvelle car vous pouvez utiliser Ce tutoriel comme base pour créer des graphiques pour vos applications ioniques.
- Explorez plus d'événements: dans ce tutoriel, j'ai expliqué comment utiliser la méthode SetChartdata, mais il existe de nombreux événements et méthodes que vous pouvez utiliser pour améliorer l'expérience utilisateur de votre application. Consultez les pages liées ci-dessus pour en savoir plus sur les différents événements et méthodes proposés par FusionCharts.
Si vous rencontrez des difficultés tout en essayant de faire des graphiques par vous-même, veuillez vous référer à la documentation d'Angular ou de FusionCharts (selon la question), ou laissez simplement un commentaire ci-dessous. Je serai plus qu'heureux d'aider!

Des questions fréquemment posées sur la composante du graphique dans Angular2 FusionCharts

Comment installer FusionCharts dans Angular2?

Pour installer FusionCharts dans Angular2, vous devez d'abord installer FusionCharts et Angular FusionCharts via NPM. Utilisez les commandes suivantes dans votre terminal:
NPM Installez FusionCharts
NPM Installez Angular-FusionCharts
Après l'installation, importez FusionCharts et Angular FusionCharts dans votre fichier de composant. Ensuite, ajoutez FusionChartsmodule à votre tableau d'importation ngmodule.

Puis-je utiliser FusionCharts avec un cli?

Oui, FusionCharts est compatible avec une CLI angulaire. Après avoir installé FusionCharts et Angular FusionCharts via NPM, vous pouvez les importer dans votre projet CLI angulaire. Remember to add FusionChartsModule to your NgModule imports array.

How do I create a basic chart using FusionCharts in Angular2?

To create a basic chart, you need to first define the chart configuration in your composant. Cela inclut le type de graphique, la source de données et d'autres options. Ensuite, utilisez le composant FusionCharts dans votre modèle pour rendre le graphique. Vous pouvez personnaliser le graphique en modifiant la configuration du graphique.

Quels types de graphiques puis-je créer avec FusionCharts dans Angular2?

FusionCharts prend en charge une grande variété de types de graphiques, y compris la ligne, la barre, la tarte , zone, beignet, et plus encore. Vous pouvez également créer des graphiques avancés comme les graphiques combinés, les graphiques zoom et Treemaps. Chaque type de graphique a ses propres options de configuration, que vous pouvez personnaliser en fonction de vos besoins.

Comment puis-je mettre à jour les données dans mon graphique FusionCharts?

Pour mettre à jour les données de votre graphique, vous Besoin de modifier la source de données dans votre configuration de graphique. FusionCharts mettra à jour automatiquement le graphique lorsque la source de données changera. Vous pouvez également utiliser les méthodes SetJSondata ou SetChartData pour mettre à jour les données par programme.

Puis-je utiliser FusionCharts dans Angular2 avec TypeScript?

Oui, FusionCharts est compatible avec TypeScript. Vous pouvez importer FusionCharts et Angular FusionCharts dans votre fichier TypeScript et les utiliser comme vous le feriez dans un fichier JavaScript ordinaire.

Comment gérer les événements dans FusionCharts dans Angular2?

FusionCharts fournit un certain nombre de personnes en nombre de personnes en nombre de Des événements que vous pouvez écouter, tels que DataPlotClick, ChartClick et BeforeRender. Pour gérer ces événements, vous devez définir un gestionnaire d'événements dans votre composant et le lier au composant FusionCharts dans votre modèle.

Puis-je personnaliser l'apparence de mon graphique FusionCharts?

Oui, oui, FusionCharts offre une large gamme d'options de personnalisation. Vous pouvez personnaliser les couleurs, les polices, les bordures, les arrière-plans et plus encore. Ces options peuvent être définies dans la configuration du graphique.

Comment exporter mon graphique FusionCharts?

FusionCharts fournit des fonctionnalités d'exportation intégrées. Vous pouvez exporter votre graphique en tant qu'image, PDF ou SVG. To enable export, you need to set the exportEnabled option to true in your chart configuration.

How do I debug issues with my FusionCharts chart?

FusionCharts provides a debug mode that logs detailed information about le processus de rendu du graphique. Pour activer le mode Debug, définissez l'option DebugMode sur true dans votre configuration de graphique. Vous pouvez ensuite afficher les journaux de la console de votre navigateur.