Comment supprimer le logo de tracé des parcelles

Plotly est une bibliothèque gratuite et open source qui fournit un support approfondi pour une large gamme de parcelles.

Cependant, vous remarquerez que Plotly comprend la barre de mode dans le coin supérieur droit de chaque tracé. Bien que cela puisse être bénéfique pour des actions rapides telles que l'exportation du tracé vers un fichier image, cela peut également entraîner une mauvaise navigation et une visibilité, en particulier sur les écrans plus petits.

Heureusement, Plotly nous permet de supprimer la barre de mode ou les éléments spécifiques de la barre de mode comme nous le voyons. Dans ce didacticiel, nous apprendrons comment nous pouvons personnaliser la barre de mode en accélérant en utilisant le paramètre de mise en page.

Graphique

Commençons par illustrer la barre de mode dans des figures. Dans notre exemple, nous créerons un graphique de ligne simple en utilisant Plotly.js.

Commencez par créer un document HTML et appelez-le line_plot.html.

Nous pouvons ensuite ajouter du code HTML à passe-partout et ajouter le titre et tracer.bibliothèque JS. Un exemple de code est comme indiqué ci-dessous:

Une fois créé, accédez au corps du document HTML et créez un élément div. Donnez-lui une pièce d'identité de "MyDiv". Cela nous permettra d'utiliser l'élément div et de tracer la figure.

Un exemple de code est comme indiqué:

Enfin, ouvrez une balise de script et ajoutez le code comme indiqué ci-dessous:

var trace1 =
X: [0, 1, 2, 3, 4],
Y: [1, 5, 3, 7, 5],
Mode: "lignes + marqueurs",
Type: "Scatter",
;
var trace2 =
X: [1, 2, 3, 4, 5],
Y: [4, 0, 4, 6, 8],
Mode: "lignes + marqueurs",
Type: "Scatter",
;
var data = [trace1, trace2];
Tracer.NewPlot ("MyDiv", données);

Dans l'exemple ci-dessus, nous créons un graphique linéaire simple à l'aide de données d'échantillons. Le code ci-dessus doit entraîner la figure illustrée ci-dessous:

Notez que le tracé ci-dessus inclut la barre de mode par défaut. Laissez-nous maintenant discuter de la façon dont nous pouvons désactiver l'ensemble ou les éléments de la barre du mode.

Mode désactiver la barre

Pour supprimer l'ensemble de la barre de mode d'un tracé spécifique, nous pouvons utiliser le paramètre de mise en page. Un exemple de code est comme indiqué ci-dessous:

… .code tronqué… .
var Layout =
Titre: "Graphique linéaire sans mode de mode"

Tracer.newplot ("mydiv", data, disposition, displayModebar: false);
… Code tronqué… .

Dans l'exemple ci-dessus, nous commençons par définir l'objet de mise en page qui contient les propriétés que nous souhaitons personnaliser. Dans notre exemple, nous avons défini le titre de la figure en utilisant la propriété de titre.

Ensuite, nous définissons la barre de déplacement sur false dans la fonction newplot (). Le code ci-dessus doit entraîner la figure comme indiqué ci-dessous:

Vous remarquerez que la barre de mode n'apparaît même que lorsque nous planons.

Supprimer le logo de tracé

Dans certains cas, vous voudrez peut-être préserver la barre de mode mais supprimer le logo «produit avec parcelle».

Pour cela, nous pouvons définir la propriété DisplayLogo sur FALSE comme indiqué:

Tracer.newplot ("mydiv", data, disposition, displaylogo: false);

Si nous exécutons le code ci-dessus, nous devrions voir la figure avec la barre de mode mais le logo est masqué:

Comme nous pouvons le voir, la figure ne contient plus le logo produit avec Plotly.

Supprimer les boutons de la barre du mode

Vous pouvez transmettre les noms des boutons que vous souhaitez supprimer en tant que tableau à la propriété ModeBarbuttonStoreMove pour supprimer les boutons spécifiques de la barre de mode.

Considérez la figure ci-dessous avant de retirer les boutons.

Ici, nous pouvons voir que la barre de mode a tous les boutons

Pour supprimer les boutons «Toimage», zoomez, zoomez et zoomez. Nous pouvons exécuter le code comme:

Tracer.newPlot ("myDiv", data, disposition, modeBarbuttonStoreMove: ['TOIMAGE', 'ZOOM2D', 'ZOOMIN2D', 'ZOOMOUT2D']);

Dans l'exemple ci-dessus, nous supprimons les boutons ToImage, Zoom, Zoomez et zoomez. La figure résultante est comme indiqué:

Comme nous pouvons le voir, les boutons spécifiés ne sont pas disponibles à partir de la barre du mode.

Conclusion

Dans ce tutoriel, vous avez appris à personnaliser la barre de mode dans des chiffres. Nous avons également couvert comment masquer et afficher la barre de mode, supprimer des boutons spécifiques de la barre de mode et comment supprimer le logo «produit avec parcelle».