Masquer la barre de mode dans Plotly Dash

Masquer la barre de mode dans Plotly Dash
Plotly Dash ou Dash est un cadre Web gratuit et open source pour la construction d'applications Web d'apprentissage automatique et de science des données. Construit au-dessus de l'intrigue.JS, React et Flask, Dash offre des fonctionnalités incroyables, y compris des éléments d'interface utilisateur modernes avec un code minimal. Dash est également très facile à apprendre, ce qui le rend très pratique pour les débutants et les professionnels.

Dash offre également une personnalisation inégalée pour les tracés et les chiffres dans une entrée de configuration simple. Dans ce tutoriel, nous apprendrons à utiliser les fonctionnalités de configuration de Dash pour masquer la barre de mode.

Commençons.

Installation de Plotly Dash

Avant de démarrer sur les fonctionnalités de configuration du tableau de bord, il est bon de s'assurer que Dash est installé et disponible sur votre système.

Nous pouvons faire en exécutant PIP comme indiqué:

$ pip install dash

Si vous utilisez Jupyter Notebook ou un environnement de jupyter similaire, vous pouvez installer Dash en exécutant la commande:

$ pip install jupyter-dash

Gardez à l'esprit que vous aurez besoin de pandas pour utiliser.

Création d'une application de tableau de bord simple

L'étape suivante consiste à créer une application Web simple à l'aide de Dash. Pour ce tutoriel, nous utiliserons un graphique à secteurs à la fois simple et informatif.

Considérez le code source comme indiqué:

à partir de Dash Import Dash, HTML, DCC
Importer un terrain.Exprime comme PX
Importer des pandas en tant que PD
app = dash (__ name__)
Bases de données = [«MySQL», «Postgresql», «Sqlite», «Redis», «Elasticsearch»]
Utilisation = [8000, 5000, 3000, 2500, 1800]
Fig = px.tarte (étiquettes = bases de données, valeurs = utilisation, noms = bases de données)
appliquer.disposition = html.Div (enfants = [
html.H1 (enfants = «graphique à tarte simple»),
html.Div (Children = "'A Pie Chart des bases de données les plus populaires'"),
DCC.Graphique(
id = 'tarte',
Figure = Fig
)
])
Si __Name__ == '__MAIN__':
appliquer.run_server (debug = true)

Dans le code ci-dessus, nous commençons par importer le module requis. Nous importons Dash, HTML et DCC à partir de Dash,. Ces modules nous permettront de créer une application Web simple et de tracer la figure sur le client.

Ensuite, nous créons une instance d'application à l'aide de la classe Dash.

À l'étape suivante, nous créons les données que nous souhaitons utiliser. Puisque nous créons un graphique à secteurs simple, nous définissons les étiquettes et les valeurs comme une liste.

L'étape suivante consiste à composer la disposition. Ici, nous utilisons divers composants tels que HTML.Div., html.H1 et DCC.Graphique.

Le module de composant Dash nous fournit des composants utiles pour les balises HTML populaires. Par exemple, le HTML.H1 est un simple

étiqueter.

Gardez à l'esprit que tous les composants ne sont pas des éléments HTML. Par exemple, les composants du noyau de tableau de bord sont des composants de haut niveau générés par la réaction.bibliothèque JS

La propriété pour enfants nous permet de transmettre les données que nous souhaitons afficher. C'est le premier attribut qui signifie que vous pouvez le sauter.

Une fois terminé, nous pouvons exécuter l'application avec la commande:

$ application python3.py

Nous pouvons ensuite visiter l'URL cible pour afficher l'intrigue comme:

Dash Hide ModeBar

Vous remarquerez que la barre de mode apparaît sur vol. Bien que cela puisse être utile, cela peut également entraîner une mauvaise visibilité, en particulier sur les petits appareils.

Pour masquer la barre de mode dans Plotly Dash, nous pouvons utiliser le paramètre de configuration et définir la barre d'affichage DisplayMode sur FALSE comme indiqué:

DCC.Graphique(
id = 'tarte',
Figure = Fig,
config =
'DisplayModebar': Faux

Utilisation du paramètre de configuration dans le DCC.Composant graphique, nous pouvons spécifier la propriété 'DisplayModebar' en false. Cela devrait supprimer la barre du mode de la figure.

Fermeture

Dans ce tutoriel, vous avez appris les bases de la personnalisation des composants de l'intrigue. Nous avons également couvert comment désactiver la barre de mode à partir des figures dans Dash.