Application de graphiques avec des curseurs

introduction

Ceci est un mémo car je crée souvent des graphiques avec des curseurs avec plotly.

Puisque le code est officiellement utilisé pour déplacer un tracé avec un curseur, je décrirai une petite application comme lorsque vous souhaitez déplacer plusieurs tracés en même temps.

Site officiel (page d'explication du curseur) Sliders | Python | Plotly

environnement

Mac OS python 3.8.5 plotly 4.12.0

pip, import Installez ce qui suit à partir de pip: Je l'ai installé ensemble pour utiliser numpy dans l'article.

pip install plotly
pip install numpy

import numpy as np
import plotly.offline as offline
import plotly.graph_objs as go

principes de base du curseur plotly

Bien qu'il soit officiellement répertorié, pour le moment

See the Pen simple slider by shunta-m (@shunta-m) on CodePen.

Il est écrit dans l'ordre de création de trace (tracé) -> création de mise en page -> création de graphe

import numpy as np
import plotly.offline as offline
import plotly.graph_objs as go

#Liste pour enregistrer les parcelles
data = []
x = np.linspace(0, 10, 101)
#Créer un tracé
# 0, 0.1, ... ,Créez des parcelles jusqu'à 5
for step in np.linspace(0, 5, 51):
    y = np.sin(step * x)

    trace = go.Scatter(
        x=x,
        y=y,
        name="sin step{:.1f}".format(step),
        line=dict(color="red", width=3),
        visible=False, )  #Rends-le invisible
    data.append(trace)

#Rendre le 10ème tracé visible comme état initial
data[10].visible = True

#Où afficher par la position du curseur/Liste à masquer ou enregistrer
steps = []
"""
Décidez où voir dans l'instruction for
Par exemple, lorsque le curseur est à 10, je veux juste voir le 10ème tracé.
Cacher tout une fois->Définissez visible sur le 10ème graphique sur True pour le rendre visible
"""
for s in range(len(data)):
    step = dict(method="update",
                args=[{"visible": [False] * len(data)},  #Cacher tout une fois
                      {"title": "Simple slider step: {}".format(s)}]  #Changer le titre en fonction de la position du curseur
                )
    step["args"][0]["visible"][s] = True  #Rendre visibles uniquement les correspondants
    #Ajout d'une mise en page créée dans ↑ que seul le sth peut être vu aux étapes
    steps.append(step)

sliders = [dict(
    active=10,  #Valeur initiale du curseur
    currentvalue=dict(prefix="Frequency: "),
    pad=dict(t=50),  #Plage d'occupation du curseur,Plus la valeur est élevée, plus la plage du curseur est grande.
    steps=steps)]  #Afficher que les étapes ont/Utiliser des informations cachées

layout = go.Layout(
    title="Simple slider step: 10",  #Titre initial
    xaxis=dict(title="x"),
    yaxis=dict(title="y"),
    font=dict(family="Meiryo", size=16),  #Changez la police du graphique en Meirio et la taille en 16
    #Mode survol (à quoi ressemblent les nombres lorsque le curseur est proche du graphique)
    #La chaîne qui peut être donnée"x", "y", "closest", False, "x unified", "y unified"
    hovermode="x unified",
    hoverlabel=dict(font_size=16),  #Paramètre de taille de police en mode survol
    sliders=sliders,  #Ajouter un curseur
    showlegend=True)  #Affichage de la légende défini sur True

fig = dict(data=data, layout=layout)

#production
offline.plot(fig, auto_open=True, include_plotlyjs="cdn", filename="simple_slider.html")

Déplacer plusieurs tracés

Déplaçons les deux sin wave et cos wave.

import numpy as np
import plotly.offline as offline
import plotly.graph_objs as go

# sin,Enregistrer les traces d'onde cos séparément
sin_data, cos_data = [], []
x = np.linspace(0, 10, 101)

for step in np.linspace(0, 5, 51):
    y = np.sin(step * x)
    y2 = np.cos(step * x)

    sin_trace = go.Scatter(
        x=x,
        y=y,
        name="sin {:.1f}Hz".format(step),
        line=dict(color="red", width=3),
        visible=False, )

    cos_trace = go.Scatter(
        x=x,
        y=y2,
        name="cos {:.1f}Hz".format(step),
        line=dict(color="blue", width=3),
        visible=False, )

    sin_data.append(sin_trace)
    cos_data.append(cos_trace)

sin_data[10].visible = True
cos_data[10].visible = True

data = sin_data + cos_data

steps = []
"""
sin_data, cos_Affichage des données/Définir caché séparément, puis combiner et ajouter à la clé visible
Par exemple, lorsque le curseur est 2,
sin_visible = [False, False, True, False,...]
cos_visible = [False, False, True, False,...]
En combinant les deux après,Permet aux deux cos d'afficher la trace à l'adresse 2
"""
for s in range(len(sin_data)):
    # sin_data, cos_Masquer toutes les données une fois
    sin_visible, cos_visible = [False] * len(sin_data), [False] * len(cos_data)
    #Rendre seulement le qc visible
    sin_visible[s], cos_visible[s] = True, True
    step = dict(method="update",
                args=[{"visible": sin_visible + cos_visible},
                      {"title": "Simple slider step: {}".format(s)}]
                )
    steps.append(step)

sliders = [dict(
    active=10,
    currentvalue=dict(prefix="Frequency: "),
    pad=dict(t=50),
    steps=steps)]

layout = go.Layout(
    title="Simple slider step: 10",
    xaxis=dict(title="x"),
    yaxis=dict(title="y"),
    font=dict(family="Meiryo", size=16),
    hovermode='x unified',
    hoverlabel=dict(font_size=16),
    sliders=sliders,
    showlegend=True)

fig = dict(data=data, layout=layout)

offline.plot(fig, include_plotlyjs="cdn", filename="plots.html")

Déplacer des parcelles

Quand il y a des choses que vous voulez déplacer avec le curseur et des choses que vous ne voulez pas déplacer dans le même graphique

import numpy as np
import plotly.offline as offline
import plotly.graph_objs as go

data = []
sin_data, cos_data = [], []
x = np.linspace(0, 10, 101)

#Terrain fixe
trace = go.Scatter(
    x=x,
    y=2 * np.cos(x),
    name="2 * cos",
    line=dict(color="green", width=3),
    visible=True, )
data.append(trace)  #Le 0ème des données est une information de tracé fixe

#Tracé de curseur
for step in np.linspace(0, 5, 51):
    y = np.sin(step * x)
    y2 = np.cos(step * x)
    sin_trace = go.Scatter(
        x=x,
        y=y,
        name="sin {:.1f}Hz".format(step),
        line=dict(color="red", width=3),
        visible=False, )

    cos_trace = go.Scatter(
        x=x,
        y=y2,
        name="cos {:.1f}Hz".format(step),
        line=dict(color="blue", width=3),
        visible=False, )

    sin_data.append(sin_trace)
    cos_data.append(cos_trace)

sin_data[10].visible = True
cos_data[10].visible = True

data += sin_data + cos_data
steps = []
"""
Toujours afficher les tracés fixes, donc rendre visible toujours True
    ->0ème des données(Terrain fixe)Vrai
"""
for s in range(len(sin_data)):
    sin_visible, cos_visible = [False] * len(sin_data), [False] * len(cos_data)
    sin_visible[s], cos_visible[s] = True, True
    step = dict(method="update",
                args=[{"visible": [True] + sin_visible + cos_visible},  #0e est toujours vrai
                      {"title": "Simple slider step: {}".format(s)}]
                )
    steps.append(step)

sliders = [dict(
    active=10,
    currentvalue=dict(prefix="Frequency: "),
    pad=dict(t=50),
    steps=steps)]

layout = go.Layout(
    title="Simple slider step: 10",
    xaxis=dict(title="x"),
    yaxis=dict(title="y"),
    font=dict(family="Meiryo", size=16),
    hovermode='x unified',
    hoverlabel=dict(font_size=16),
    sliders=sliders,
    showlegend=True)

fig = dict(data=data, layout=layout)

offline.plot(fig, include_plotlyjs="cdn", filename="plot2.html")

Cacher du milieu

Cos disparaît lorsque le curseur atteint 40 ou plus.

Lorsqu'elle est égale ou supérieure à 40, les valeurs x et y de cos_trace sont simplement définies sur None.

import numpy as np
import plotly.offline as offline
import plotly.graph_objs as go

x = np.linspace(0, 10, 101)

data = []
sin_data, cos_data = [], []

trace = go.Scatter(
    x=x,
    y=2 * np.cos(x),
    name="2 * cos",
    line=dict(color="green", width=3),
    visible=True, )
data.append(trace)

for step in np.linspace(0, 5, 51):
    y = np.sin(step * x)
    y2 = np.cos(step * x)
    sin_trace = go.Scatter(
        x=x,
        y=y,
        name="sin {:.1f}Hz".format(step),
        line=dict(color="red", width=3),
        visible=False, )

    if step < 4:
        cos_trace = go.Scatter(
            x=x,
            y=y2,
            name="cos {:.1f}Hz".format(step),
            line=dict(color="blue", width=3),
            visible=False, )
    else:
        cos_trace = go.Scatter(x=None, y=None)  #4 ou plus est Aucun

    sin_data.append(sin_trace)
    cos_data.append(cos_trace)

sin_data[10].visible = True
cos_data[10].visible = True

data += sin_data + cos_data

steps = []
for s in range(len(sin_data)):
    sin_visible, cos_visible = [False] * len(sin_data), [False] * len(cos_data)
    sin_visible[s], cos_visible[s] = True, True
    step = dict(method="update",
                args=[{"visible": [True] + sin_visible + cos_visible},
                      {"title": "Simple slider step: {}".format(s)}]
                )
    steps.append(step)

sliders = [dict(
    active=10,
    currentvalue=dict(prefix="Frequency: "),
    pad=dict(t=50),
    steps=steps)]

layout = go.Layout(
    title="Simple slider step: 10",
    xaxis=dict(title="x"),
    yaxis=dict(title="y"),
    font=dict(family="Meiryo", size=16),
    hovermode='x unified',
    hoverlabel=dict(font_size=16),
    sliders=sliders,
    showlegend=True)

fig = dict(data=data, layout=layout)

offline.plot(fig, include_plotlyjs="cdn", filename="plots3.html")

Site de référence

Site officiel Plotly Python Graphing Library | Python | Plotly

codepen Vérifiez le résultat du dessin à l'aide de Plotly en incorporant CodePen dans Qiita --Qiita CodePen peut maintenant être intégré dans des articles avec Qiita-Qiita