Dessinez un graphique avec l'interface graphique PySimple

Ce que vous pouvez lire cet article

Avec l'interface graphique PySimple, vous pourrez:

• Vous pourrez dessiner des graphiques à barres, des graphiques linéaires, etc. --Graphe qui met à jour l'affichage régulièrement

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

• Incorporer matplotlib et dessiner

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

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.

• Démo officielle

  • https://github.com/PySimpleGUI/PySimpleGUI/tree/master/DemoPrograms

• Démo officielle 2

  • https://pysimplegui.trinket.io/demo-programs#/demo-programs/the-basic-pysimplegui-program

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

Coopération avec matplotlib

• https://github.com/PySimpleGUI/PySimpleGUI/blob/master/DemoPrograms/Demo_Matplotlib.py --Coopération avec matplotlib. Il existe plusieurs autres démos utilisant matplotlib

Animation à trier

• https://pysimplegui.trinket.io/demo-programs#/graph-element/visualizing-sorts --Graphique animé qui trie les valeurs du graphique à barres par tri à bulles.

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

• https://github.com/PySimpleGUI/PySimpleGUI-Rainmeter-CPU-Cores/blob/master/PySimpleGUI_Rainmeter_CPU_Cores.py
• Ceci est un graphique qui affiche la valeur du processeur. L'arrière-plan est translucide ou les onglets sont masqués

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é.