Tracer.Toimage

Les images sont un outil important pour travailler avec des figures statistiques. Ils vous permettent d'exporter les chiffres en images statiques que vous pouvez partager ou télécharger sur un site Web.

Dans cet article, nous explorerons comment nous pouvons exporter les figures d'intrigue en images statiques en utilisant l'intrigue.fonction js toimage ().

Sans plus encore ADO, plongeons-nous dans.

Tracer.TOIMAGE ()

Pour exporter un terrain.JS figure dans une image statique, nous utilisons la fonction toImage (). La syntaxe de fonction est comme indiqué dans les éléments suivants:

TOIMAGE (FORMAT: Target_image_Format, Width: désiré_image_size_in_pixels, hauteur: désiré_image_size_in_pixels).

Comme nous pouvons le voir, la fonction a une syntaxe relativement simple et simple.

Exemple 1:.Figure d'exportation JS vers le fichier PNG statique

Illustrons comment nous pouvons exporter une parcelle.JS Figure en utilisant la fonction toImage (). Pour ce tutoriel, nous créons un tracé de barre simple comme indiqué dans le code suivant:

Dans le code donné, nous utilisons l'intrigue.JS pour créer une barre de bar de l'utilisation du navigateur. Nous pouvons exécuter le code et afficher le tracé comme indiqué dans ce qui suit:

Nous pouvons maintenant enregistrer le tracé de la barre dans une image statique comme indiqué dans le code suivant:

Dans cet exemple, nous utilisons la bibliothèque D3 pour tracer. Nous commençons par appeler l'intrigue.Fonction TOIMAGE () et transmettez les données comprenant la fonction pour exporter l'image. Nous passons également le format dans lequel nous souhaitons exporter l'image, dans ce cas, en tant que fichier png.

Enfin, nous tracons l'image sur la balise IMG avec l'ID de PNG-Export comme spécifié dans la variable.

Nous pouvons exécuter le code dans le navigateur.

Vous pouvez maintenant utiliser les outils de navigateur pour exporter l'image dans un fichier sur votre disque.

Exemple 2:.JS Enregistrer l'image sous le nom de JPEG / JPG

Vous pouvez également exporter une figure en tant que format JPG / JPEG en spécifiant le paramètre de format. Un exemple de code est comme indiqué dans ce qui suit:

img_jpg.att ("src", url);
Tracer.TOIMAGE (GD, Format: "JPEG", Width: Target_Width, Height: Target_Width);

Le même cas s'applique lors de l'exportation d'une image en tant que SVG.

img_svg.att ("src", url);
Tracer.toImage (gd, format: 'svg', width: target_width, height: target_height);

Conclusion

Dans ce didacticiel, vous avez appris comment vous pouvez exporter une figure de tracé dans un format PNG, JPG ou SVG statique en utilisant la fonction toImage () de l'intrigue.js. Codage heureux!!