Plotly est un excellent outil de tracé qui prend en charge de manière exhaustive les différentes parcelles et utilise des cas. De plus, il prend en charge des langues importantes, telles que Python, R, JavaScript, et plus.

Dans ce tutoriel, nous nous concentrerons sur l'utilisation de la fonction téléchargement () de l'intrigue.JS, qui nous permet de télécharger une image d'un tracé.

Installation de l'intrigue

La première étape consiste à vous assurer que vous avez.JS installé et exécuté sur votre système. Vous pouvez inclure le fichier en tant que CDN ou l'installer via NPM.

Pour plus de simplicité, nous inclurons le package Plotly-JS en tant que CDN. Cela nous permet d'éviter d'installer et de télécharger le nœud.JS et NPM.

Cependant, si vous avez un nœud installé, vous pouvez exécuter la commande suivante pour installer Plotly.js dans votre projet.

Une fois installé, nous pouvons aller de l'avant et l'utiliser dans nos projets.

Graphique à barres de base

L'étape suivante consiste à préparer l'intrigue que nous souhaitons créer. Pour notre exemple, nous utiliserons un graphique à barres.

Commencez par créer un index.fichier html. Cela comprendra tout le code des données et le type de parcelles que nous souhaitons exécuter.

Dans l'index.Fichier HTML, ajoutez le code comme indiqué ci-dessous:

Terrain de barre

Bar

Nous commençons par inclure le code HTML Playplate par défaut dans l'exemple précédent. Ensuite, nous avons le Plotly JS en tant que CDN en utilisant la balise de script.

Enfin, nous avons créé trois éléments HTML pour décorer la page. Tout d'abord, assurez-vous d'inclure la div avec votre identifiant spécifique. Plotly utilisera cet élément DIV pour afficher le tracé comme indiqué dans l'intrigue.fonction newplot ().

Nous pouvons alors ouvrir l'index.Fichier HTML dans notre navigateur et voir le tracé comme indiqué ci-dessous:

Plotly DownloadImage ()

La fonction téléchargement () vous permet de déclencher un téléchargement d'image d'un tracé spécifique.

La fonction accepte le nom de l'intrigue que vous souhaitez télécharger, le format, la largeur, la hauteur et le nom de fichier comme paramètres.

La syntaxe peut être exprimée comme indiqué ci-dessous:

Tracer.TéléchargementImage (Plot_name, Format: 'png', largeur: 800, hauteur: 600, nom de fichier: 'newPlot');

N'hésitez pas à remplacer les noms par vos valeurs cibles.

Dans notre exemple de tracé de barre fourni, nous pouvons utiliser la fonction alors en javascript pour charger la fonction d'image téléchargement ().

Tracer.NewPlot ("Plotly_Div", Data, Layout).alors (fonction (téléchargement)
Tracer.DownloadImage (Télécharger,
Format: 'JPEG',
hauteur: 800,
Largeur: 1200,
Nom de fichier: «Terrain»
)
);

Une fois que nous avons exécuté l'index.Fichier HTML, le navigateur doit afficher l'image et télécharger l'image avec les paramètres spécifiés.

Le fichier résultant est illustré ci-dessous:

La fonction accepte les formats d'image suivants lors de l'exportation d'une image:

1. PNG
2. Jpeg
3. Webp
4. SVG
5. complexe

Exemple 2

Pour télécharger une image au format JSON, définissez le format comme «complet» comme indiqué:

Tracer.NewPlot ("Plotly_Div", Data, Layout).alors (fonction (téléchargement)
Tracer.DownloadImage (Télécharger,
Format: 'Full-Json',
hauteur: 800,
Largeur: 1200,
Nom de fichier: «Terrain»
)
);

Le code précédent doit renvoyer un fichier JSON avec toutes les propriétés du tracé spécifié.

Conclusion

Dans ce tutoriel, nous avons couvert comment utiliser la fonction téléchargement () dans l'intrigue.js pour télécharger l'image d'un intrigue. Plusieurs exemples ont été fournis qui ont montré l'utilisation du graphique à barres de base avant d'utiliser la fonction Plotly DownloadImage ().