Dessinez un graphique avec l'interface graphique PySimple

Ce que vous pouvez lire cet article

graph_example.jpg

Avec l'interface graphique PySimple, vous pourrez:

Pour le fonctionnement de base de PySimpleGUI, reportez-vous à Si vous utilisez Tkinter, essayez d'utiliser PySimpleGUI.

Aperçu

Je pense que de nombreuses personnes analysent les données comme moyen d'utiliser Python. En outre, certaines personnes peuvent souhaiter visualiser les résultats de l'analyse avec un graphique linéaire ou un graphique à barres.

Il existe à peu près deux façons d'utiliser les graphiques avec PySimpleGUI.

-Draw en utilisant graph-element

Cette fois, je vais vous expliquer comment le créer en utilisant graph-element.

À propos de graph-element

graph-element est une classe utilisée pour le dessin. Dans tkinter, le dessin est fait à l'aide de canvas, mais l'élément graph de PySimpleGUI est rendu plus facile à utiliser en concevant le système de coordonnées de canvs.

Comme utilisation de base Utilisez la classe Graph pour spécifier la taille de la zone de dessin, la coordonnée inférieure gauche (origine) de la zone de dessin et la coordonnée supérieure droite.

graph = sg.Graph((500,500), (0,0), (500, 500))

Après cela, nous utiliserons chaque méthode de dessin pour ce graphique.

--DrawCircle: dessinez un cercle --DrawLine: tracez une ligne --DrawPoint: placer des points --DrawRectangle: dessine un quadrilatère --DrawOval: dessine un arc --DrawImage: Afficher l'image --DrawText: dessiner des caractères

Parmi ceux-ci, les suivants sont utilisés pour dessiner des graphiques à barres et des graphiques circulaires.

--DrawLine: Utilisé pour dessiner des lignes, des lignes auxiliaires et des échelles sur le graphique de ligne de pliage. --DrawPoint: Utilisé pour dessiner des points tracés sur un graphique de ligne de pliage ou pour dessiner un arc comme une onde sinusoïdale --DrawText: Utilisé pour afficher les étiquettes et les valeurs des graphiques par tracé

Utilisez également la méthode suivante.

--Effacer: efface la zone de dessin. Il est utilisé pour non pour supprimer le graphique qui était en cours de dessin lors du changement de graphique. --Move: déplace ce qui est dessiné dans les directions x et y. Utilisé pour déplacer le graphique en temps réel

code

Je publierai un résumé de l'exemple de code officiel. Changer le contenu du graphique avec le bouton

Écran d'exécution graph_example.jpg

code

import PySimpleGUI as sg
from random import randint
import math
"""
Les échantillons officiels suivants sont intégrés dans un
https://pysimplegui.trinket.io/demo-programs#/graph-element/graph-element-bar-chart
https://pysimplegui.trinket.io/demo-programs#/graph-element/graph-element-sine-wave
https://pysimplegui.trinket.io/demo-programs#/graph-element/graph-element-line-graph-with-labels
https://pysimplegui.trinket.io/demo-programs#/graph-element/animated-line-graph
"""

#constant
GRAPH_SIZE = (500, 500)
DATA_SIZE = (500, 500)

# 
PLOTS_NUMBER = 30
RAND_MAX = 400

#Pour les lignes brisées
LINE_BAR_WIDTH = 10
LINE_BAR_SPACING = 16
LINE_EDGE_OFFSET = 3

#graphique à barres
BAR_WIDTH = 50
BAR_SPACING = 75
EDGE_OFFSET = 3

#Graphique de signe
SIZE_X = GRAPH_SIZE[0]//2
SIZE_Y = GRAPH_SIZE[1]//2
NUMBER_MARKER_FREQUENCY = 25

#Animation
GRAPH_STEP_SIZE = 5
DELAY = 15  #Intervalle de temps

#Disposition
#Définition de la zone de dessin du graphique
graph = sg.Graph(GRAPH_SIZE, (0, 0), DATA_SIZE,
                 key='-GRAPH-', background_color='white',)

layout = [[sg.Text('chart demo')],
          [graph],
          [sg.Button('LINE'), sg.Button('chart'), sg.Button('Tous les deux'), sg.Button('diagramme circulaire'), sg.Button('Onde sinusoïdale'),sg.Button('animation') ]]

window = sg.Window('Exemple de graphique simple', layout)

before_value = 0  #Initialisation du graphique linéaire
delay = x = lastx = lasty = 0  #Initialisation de l'animation

is_animated = False


def draw_axis():
    """Tracez des lignes auxiliaires sur les axes X et Y

Origine en bas à gauche de l'élément graphique(0,0)Est défini comme
Déplacement avec le centre de la zone graphique comme origine
    """

    graph.draw_line((0, SIZE_Y), (SIZE_X*2, SIZE_Y))  #origine
    graph.draw_line((SIZE_X, 0), (SIZE_X, SIZE_Y*2))

    for x in range(0, SIZE_X*2, NUMBER_MARKER_FREQUENCY):
        graph.draw_line((x, SIZE_Y-3), (x, SIZE_Y+3))  #Dessinez une échelle
        if x != 0:
            graph.draw_text(str(x-SIZE_X), (x, SIZE_Y-10),
                            color='green')  #Dessinez la valeur de l'échelle

    for y in range(0, SIZE_Y*2+1, NUMBER_MARKER_FREQUENCY):
        graph.draw_line((SIZE_X-3, y), (SIZE_X+3, y))
        if y != 0:
            graph.draw_text(str(y-SIZE_Y), (SIZE_X-10, y), color='blue')


while True:

    if is_animated:
        #Régulièrement'__TIMEOUT__'L'événement est émis
        event, values = window.Read(timeout=DELAY)
    else:
        event, values = window.Read()

    if event is None:
        break

    if event == 'LINE':
        is_animated = False
        #Afficher le graphique de ligne de pliage étiqueté
        graph.Erase()  #Affichage graphique Supprimer les deux machines

        for i in range(PLOTS_NUMBER):
            graph_value = randint(0, 400)
            if i > 0:
                graph.DrawLine(((i-1) * LINE_BAR_SPACING + LINE_EDGE_OFFSET + LINE_BAR_WIDTH/2,  before_value),
                               (i * LINE_BAR_SPACING + LINE_EDGE_OFFSET + LINE_BAR_WIDTH/2, graph_value), color='green', width=1)

            #Afficher l'étiquette de ligne brisée (valeur y)
            graph.DrawText(text=graph_value, location=(
                i * LINE_BAR_SPACING+EDGE_OFFSET+2, graph_value+10))

            graph.DrawPoint((i * LINE_BAR_SPACING + LINE_EDGE_OFFSET +
                             LINE_BAR_WIDTH/2, graph_value), size=3, color='green',)

            before_value = graph_value

    if event == 'chart':
        is_animated = False

        #Supprimer le graphique à barres
        graph.Erase()
        for i in range(PLOTS_NUMBER):
            graph_value = randint(0, 400)
            graph.DrawRectangle(top_left=(i * BAR_SPACING + EDGE_OFFSET, graph_value),
                                bottom_right=(i * BAR_SPACING + EDGE_OFFSET + BAR_WIDTH, 0), fill_color='blue')
            graph.DrawText(text=graph_value, location=(
                i*BAR_SPACING+EDGE_OFFSET+25, graph_value+10))

    if event == 'Tous les deux':
        is_animated = False

        #Afficher à la fois un graphique linéaire et un graphique à barres
        graph.Erase()
        for i in range(PLOTS_NUMBER):
            graph_value = randint(0, 400)
            graph.DrawRectangle(top_left=(i * BAR_SPACING + EDGE_OFFSET, graph_value),
                                bottom_right=(i * BAR_SPACING + EDGE_OFFSET + BAR_WIDTH, 0), fill_color='blue')
            graph.DrawText(text=graph_value, location=(
                i*BAR_SPACING+EDGE_OFFSET+25, graph_value+10))

            if i > 0:
                graph.DrawLine(((i-1) * LINE_BAR_SPACING + LINE_EDGE_OFFSET + LINE_BAR_WIDTH/2,  before_value),
                               (i * LINE_BAR_SPACING + LINE_EDGE_OFFSET + LINE_BAR_WIDTH/2, graph_value), color='green', width=1)

            graph.DrawText(text=graph_value, location=(
                i * LINE_BAR_SPACING+EDGE_OFFSET+2, graph_value+10))

            graph.DrawPoint((i * LINE_BAR_SPACING + LINE_EDGE_OFFSET +
                             LINE_BAR_WIDTH/2, graph_value), size=3, color='green',)
            before_value = graph_value

    if event == 'diagramme circulaire':
        is_animated = False
        graph.erase()
        
        # create_arc()Ne peut pas être rempli car il n'y a pas de remplissage
        graph.DrawArc( (50,50), (DATA_SIZE[0]-50, DATA_SIZE[1]-50), extent=-200, start_angle=90)
        graph.DrawArc( (50,50), (DATA_SIZE[0]-50, DATA_SIZE[1]-50), extent=-400, start_angle=-110 ,arc_color="yellow")
        graph.DrawArc( (50,50), (DATA_SIZE[0]-50, DATA_SIZE[1]-50), extent=-50,  start_angle=-510 , arc_color="blue")
        graph.DrawArc( (50,50), (DATA_SIZE[0]-50, DATA_SIZE[1]-50), extent=-50,  start_angle=-560 , arc_color="red")
        graph.DrawArc( (50,50), (DATA_SIZE[0]-50, DATA_SIZE[1]-50), extent=-20,  start_angle=-610 , arc_color="green")

    if event == 'Onde sinusoïdale':
        is_animated = False
        graph.erase()

        draw_axis()
        prev_x = prev_y = None
        for x in range(0, SIZE_X*2):
            y = math.sin(x/75)*100 + SIZE_Y
            if prev_x is not None:
                graph.draw_line((prev_x, prev_y), (x, y), color='red')
            prev_x, prev_y = x, y

    if event == 'animation' or is_animated:

        if not is_animated:
            graph.Erase()  #Supprimer le graphique une fois

        is_animated = True

        #Afficher un graphique qui se déplace dans l'ordre chronologique
        step_size, delay = GRAPH_STEP_SIZE, DELAY
        y = randint(0, GRAPH_SIZE[1])
        if x < GRAPH_SIZE[0]:  #Première fois
            # window['-GRAPH-'].DrawLine((lastx, lasty), (x, y), width=1)
            graph.DrawLine((lastx, lasty), (x, y), width=1)
        else:
            # window['-GRAPH-'].Move(-step_size, 0)  #Décale tout le graphique vers la gauche
            # window['-GRAPH-'].DrawLine((lastx, lasty), (x, y), width=1)
            graph.Move(-step_size, 0)  #Décale tout le graphique vers la gauche
            graph.DrawLine((lastx, lasty), (x, y), width=1)
            x -= step_size
            lastx, lasty = x, y
        lastx, lasty = x, y
        x += step_size

window.Close()

La différence avec le graphique officiel est que l'origine de l'onde sinusoïdale est (0,0) à partir de la totalité du canevas cette fois, donc les coordonnées de (250,250) sont décalées vers l'origine. Dans l'exemple officiel, la coordonnée la plus à gauche est (250, -250). De plus, il n'y a pas d'échantillon officiel pour le graphe circulaire, et j'ai essayé de l'implémenter indépendamment en utilisant la méthode DrawArc, mais il n'y a pas de paramètre fill qui remplit l'intérieur du cercle, et la spécification d'angle est unique et prend du temps. Donc je pense qu'il vaut mieux arrêter de faire des graphiques circulaires

En utilisant l'élément graphique de PySimpleGUI, il est possible de créer des graphiques simples tels que des graphiques à barres et des graphiques linéaires, tels que ceux créés avec la fonction graphique d'Excel.

À propos de l'échantillon officiel lié au graphique

PySimpleGUI a de nombreux exemples de fichiers, et il existe de nombreux exemples utiles qui peuvent être utilisés comme référence pour l'implémentation.

Voici quelques exemples que je trouve personnellement utiles et intéressants.

Coopération avec matplotlib

Demo_Matplotlib.png

Animation à trier

visualizing-sorts.png

Graphique en temps réel montrant l'utilisation du processeur

PySimpleGUI_Rainmeter_CPU_Cores.png

Résumé

Vous avez constaté que vous pouvez facilement créer des graphiques à l'aide de l'interface graphique PySimple. Dans l'exemple officiel de PySimpleGUI, il existe d'autres exemples utilisant des graphiques, veuillez donc jeter un coup d'œil si vous êtes intéressé.

Recommended Posts

Dessinez un graphique avec l'interface graphique PySimple
Dessinez un graphique avec NetworkX
Dessinez un graphique avec networkx
Dessinez un graphique lâche avec matplotlib
Dessinez un graphique avec Julia + PyQtGraph (3)
Dessinez un graphique avec des pandas + XlsxWriter
Dessinez un graphique avec PyQtGraph Part 1-Drawing
Dessinez une surface plane avec un graphique 3D matplotlib
Dessinez un graphique avec des étiquettes japonaises dans Jupyter
Comment dessiner un graphique à 2 axes avec pyplot
Dessinez un graphique avec les paramètres PyQtGraph Partie 3-PlotWidget
Dessinez un graphique en traitant avec Pandas groupby
[Python] Dessinez un graphe orienté avec Dash Cytoscape
Dessinez un graphique avec les paramètres PyQtGraph Part 4-PlotItem
Dessinez un graphique avec PyQtGraph Partie 6 - Affichage d'une légende
Dessinez un graphique avec PyQtGraph Partie 5-Augmentez l'axe Y
[Python] Comment dessiner un graphique linéaire avec Matplotlib
Dessinez un graphique avec PyQtGraph Partie 2 - Paramètres de tracé détaillés
Étudier les mathématiques avec Python: dessiner un graphe sympy (scipy) avec matplotlib
Faisons une interface graphique avec python.
Dessinez un beau cercle avec numpy
Traitement de fichiers multiples avec Kivy + Matplotlib + Draw Graph sur GUI
[Visualisation] Je veux dessiner un beau graphique avec Plotly
Faire un joli graphique avec plotly
Dessinez facilement une carte avec matplotlib.basemap
[PyQt] Afficher des graphiques multi-axes avec QtChart
Comment dessiner un graphique avec Matplotlib
Dessinez un cœur en rubis avec PyCall
Créer une application graphique avec Tkinter de Python
Afficher le graphe xy de Matplotlib avec PySimpleGUI.
Dessinez simplement un graphique en spécifiant un fichier
Créer un graphique avec des bordures supprimées avec matplotlib
(Matplotlib) Je veux dessiner un graphique avec une taille spécifiée en pixels
Comment dessiner un graphique à barres qui résume plusieurs séries avec matplotlib
Dessiner un graphique d'une fonction quadratique en Python
J'ai créé une application graphique avec Python + PyQt5
Comment dessiner un graphique 3D avant l'optimisation
Créer un fichier exécutable GUI créé avec tkinter
Dessinez une "courbe de seins" dans un graphique 3D (1)
Mémo qui a fait un graphique pour animer avec intrigue
Essayez de dessiner une courbe de vie avec python
Vous pouvez facilement créer une interface graphique même avec Python
[Python] Dessinez un Mickey Mouse avec une tortue [Débutant]
Dessinez une "courbe de seins" dans un graphique 3D (2)
J'ai fait un graphique de nombres aléatoires avec Numpy
Ouvrir la boîte de dialogue de fichier avec l'interface graphique Python (tkinter.filedialog)
Dessinez plusieurs photos de plusieurs dossiers sur un graphique
Dessine un graphique avec Julia ... j'ai essayé une petite analyse
[Python] Dessinez un diagramme de relation de balises Qiita avec NetworkX
Format A4 avec python-pptx
Créez une application graphique native avec Py2app et Tkinter
Dessinez de force quelque chose comme un organigramme avec Python, matplotlib
Graphique de bande avec matplotlib
Décorer avec un décorateur
Dessiner un graphique avec python
[Python] Comment dessiner un diagramme de dispersion avec Matplotlib
Visualisation des données avec Python - La méthode de dessin simultané de graphes basés sur les attributs avec "Facet" est trop pratique
Créer une matrice de corrélation partielle et dessiner un graphique indépendant