Как сделать сделать такой график? С использованием библиотеки PyQt5

Question

Как сделать из стандартного графика widget вот такой (красным цветом отмечен нужный) стиль.

Стандартный график

Что есть сейчас:

    # Смена цвета графика на белый
    self.widget_2.setBackground('w')
    # Название графика widget
    self.widget_2.setTitle("Fe", color="b", size="12pt")
    # Добовляются названия осей координат
    styles = {"color": "#f00", "font-size": "12px"}
    self.widget_2.setLabel("left", "C(Fe общ.), мг/дм3", **styles)
    self.widget_2.setLabel("bottom", "Hour(H)", **styles)

    self.widget_2.showGrid(x=True, y=True)

Answer 1

Ну, если вы знаете, как создаются графики, то наверняка так-же знаете, что встроенных стилей в matplotlib не так уж много, и за несколько минут их можно пересмотреть. Правда некоторые из них столь близки, что разницу заметить невооруженным глазом весьма непросто, особенно на линейном графике.

import matplotlib.pyplot as plt
for i, style in enumerate(plt.style.available+['default']):
    plt.figure(i)
    plt.style.use(style)
    print(style)
    x=[1,2,3,4,5,6,7]
    y=[3,2,4,5,3,4,5]
    z=[1,2,3,4,3,4,5]
    plt.title(style)
    plt.plot(x,y)
    plt.plot(x,z)
    plt.show()

Если же ни один из этих стилей вас не удовлетворит, то сделать свой график, подобрав по вкусу или по заданному примеру соответствующие параметры стиля - тоже задача не архисложная.

Answer 2

Вы не написали с использованием какой библиотеки вы хотите строить графики. Вот вам похожая реализация того что вы хотите с использованием matplotlib.

Matplotlib — библиотека на языке программирования Python для визуализации данных двумерной графикой.

Изучайте и экспериментируйте.

import sys
import numpy as np
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.Qt import *
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
import matplotlib.pyplot as plt

#from Matplotlib_graphs_design import Ui_MainWindow
class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(750, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.verticalLayout = QtWidgets.QVBoxLayout(self.centralwidget)
        self.verticalLayout.setContentsMargins(0, 0, 0, 0)
        self.verticalLayout.setSpacing(0)
        self.verticalLayout.setObjectName("verticalLayout")
        self.frame = QtWidgets.QFrame(self.centralwidget)
        self.frame.setStyleSheet("background-color: rgb(0, 0, 127);")
        self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.frame.setFrameShadow(QtWidgets.QFrame.Raised)
        self.frame.setObjectName("frame")
        self.gridLayout = QtWidgets.QGridLayout(self.frame)
        self.gridLayout.setObjectName("gridLayout")
        self.frame_2 = QtWidgets.QFrame(self.frame)
        self.frame_2.setStyleSheet("QFrame{\n"
"background-color: rgb(255, 255, 255);\n"
"border-radius:20px;\n"
"border: 2px solid #000000;\n"
"}")
        self.frame_2.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.frame_2.setFrameShadow(QtWidgets.QFrame.Raised)
        self.frame_2.setObjectName("frame_2")
        self.verticalLayout_3 = QtWidgets.QVBoxLayout(self.frame_2)
        self.verticalLayout_3.setObjectName("verticalLayout_3")
        self.label = QtWidgets.QLabel(self.frame_2)
        self.label.setStyleSheet("QLabel{\n"
"\n"
"border: none;\n"
"}")
        self.label.setAlignment(QtCore.Qt.AlignCenter)
        self.label.setObjectName("label")
        self.verticalLayout_3.addWidget(self.label)
        self.graph_one = QtWidgets.QVBoxLayout()
        self.graph_one.setObjectName("graph_one")
        self.verticalLayout_3.addLayout(self.graph_one)
        
        self.verticalLayout_3.setStretch(0, 1)
        self.verticalLayout_3.setStretch(1, 5)
        self.gridLayout.addWidget(self.frame_2, 0, 0, 1, 1)
        self.frame_3 = QtWidgets.QFrame(self.frame)
        self.frame_3.setStyleSheet("QFrame{\n"
"background-color: rgb(255, 255, 255);\n"
"border-radius:20px;\n"
"border: 2px solid #000000;\n"
"}")
        self.frame_3.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.frame_3.setFrameShadow(QtWidgets.QFrame.Raised)
        self.frame_3.setObjectName("frame_3")
        self.verticalLayout_4 = QtWidgets.QVBoxLayout(self.frame_3)
        self.verticalLayout_4.setObjectName("verticalLayout_4")
        self.label_2 = QtWidgets.QLabel(self.frame_3)
        self.label_2.setStyleSheet("QLabel{\n"
"\n"
"border: none;\n"
"}")
        self.label_2.setAlignment(QtCore.Qt.AlignCenter)
        self.label_2.setObjectName("label_2")
        self.verticalLayout_4.addWidget(self.label_2)
        self.graph_two = QtWidgets.QVBoxLayout()
        self.graph_two.setObjectName("graph_two")
        self.verticalLayout_4.addLayout(self.graph_two)
        
        self.verticalLayout_4.setStretch(0, 1)
        self.verticalLayout_4.setStretch(1, 5)
        self.gridLayout.addWidget(self.frame_3, 0, 1, 1, 1)
        self.frame_4 = QtWidgets.QFrame(self.frame)
        self.frame_4.setStyleSheet("QFrame{\n"
"background-color: rgb(255, 255, 255);\n"
"border-radius:20px;\n"
"border: 2px solid #000000;\n"
"}")
        self.frame_4.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.frame_4.setFrameShadow(QtWidgets.QFrame.Raised)
        self.frame_4.setObjectName("frame_4")
        self.verticalLayout_6 = QtWidgets.QVBoxLayout(self.frame_4)
        self.verticalLayout_6.setObjectName("verticalLayout_6")
        self.label_3 = QtWidgets.QLabel(self.frame_4)
        self.label_3.setStyleSheet("QLabel{\n"
"\n"
"border: none;\n"
"}")
        self.label_3.setAlignment(QtCore.Qt.AlignCenter)
        self.label_3.setObjectName("label_3")
        self.verticalLayout_6.addWidget(self.label_3)
        self.graph_three = QtWidgets.QVBoxLayout()
        self.graph_three.setObjectName("graph_three")
        self.verticalLayout_6.addLayout(self.graph_three)
        
        self.verticalLayout_6.setStretch(0, 1)
        self.verticalLayout_6.setStretch(1, 5)
        self.gridLayout.addWidget(self.frame_4, 1, 0, 1, 1)
        self.frame_5 = QtWidgets.QFrame(self.frame)
        self.frame_5.setStyleSheet("QFrame{\n"
"background-color: rgb(255, 255, 255);\n"
"border-radius:20px;\n"
"border: 2px solid #000000;\n"
"}")
        self.frame_5.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.frame_5.setFrameShadow(QtWidgets.QFrame.Raised)
        self.frame_5.setObjectName("frame_5")
        self.verticalLayout_8 = QtWidgets.QVBoxLayout(self.frame_5)
        self.verticalLayout_8.setObjectName("verticalLayout_8")
        self.label_4 = QtWidgets.QLabel(self.frame_5)
        self.label_4.setStyleSheet("QLabel{\n"
"\n"
"border: none;\n"
"}")
        self.label_4.setAlignment(QtCore.Qt.AlignCenter)
        self.label_4.setObjectName("label_4")
        self.verticalLayout_8.addWidget(self.label_4)
        self.graph_four = QtWidgets.QVBoxLayout()
        self.graph_four.setObjectName("graph_four")
        self.verticalLayout_8.addLayout(self.graph_four)
        
        self.verticalLayout_8.setStretch(0, 1)
        self.verticalLayout_8.setStretch(1, 5)
        self.gridLayout.addWidget(self.frame_5, 1, 1, 1, 1)
        self.verticalLayout.addWidget(self.frame)
        MainWindow.setCentralWidget(self.centralwidget)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "Matplotlib graphs"))
        self.label.setText(_translate("MainWindow", "График N° 1"))
        self.label_2.setText(_translate("MainWindow", "График N° 2"))
        self.label_3.setText(_translate("MainWindow", "График N° 3"))
        self.label_4.setText(_translate("MainWindow", "График N° 4"))
        

class Canvas(FigureCanvas):
    def __init__(self, parent=None):     
        self.fig , self.ax = plt.subplots(1, dpi=100, figsize=(5, 5), 
            sharey=True, facecolor='white')
        super().__init__(self.fig) 

        names = ['15', '25', '30', '35','40']
        colors = ['red','red','red','red', 'red']
        _size = [10, 15, 20, 25, 30]

        self.ax.bar(names, _size, color = colors)
        self.fig.suptitle('Гистограмма',size=9)


class Canvas_2(FigureCanvas):
    def __init__(self, parent=None):     
        self.fig , self.ax = plt.subplots(1,dpi=100, figsize=(5, 5), 
            sharey=True, facecolor='white')
        super().__init__(self.fig) 

        names = ['Клубника', 'Ананас', 'Лайм', 'Виноград']
        colors = ['blue','yellow','aqua','fuchsia']
        _size = [20, 26, 30, 24]
        exploit = [0.05, 0.05, 0.05, 0.05] 

        plt.title("Количество фруктов",
            color='black',size=9, family="Arial")

        self.ax.pie(_size, explode = exploit, labels = names, 
            colors = colors,
                autopct = '%1.0f%%', pctdistance = 0.6,
                shadow=True, startangle=90, radius = 0.8, 
                labeldistance=1.1)  
        self.ax.axis('equal')


class Canvas_3(FigureCanvas):
    def __init__(self, parent=None):     
        self.fig , self.ax = plt.subplots(1, dpi=100, figsize=(5, 5), 
            sharey=True, facecolor='white')
        super().__init__(self.fig) 

        self.fig.suptitle('График данных',size=9)
        np.random.seed(20)
        y = np.random.randn(150).cumsum()

        self.ax = plt.axes()
        plt.plot(y, color='magenta')


class Canvas_4(FigureCanvas):
    def __init__(self, parent=None):     
        self.fig , self.ax = plt.subplots(1, dpi=100, figsize=(5, 5), 
            sharey=True, facecolor='white')
        super().__init__(self.fig) 

        x = [1, 2, 3, 4, 5,6,7]
        y1 = [1, 0, 1, 3, 2,4,3]
        y2 = [0, 2, 2, 3, 4,6,5]
        y3 = [3, 1, 3, 4, 2,7,6]

        y = np.vstack([y1, y2, y3])

        labels = ["Y1 ", "Y2", "Y3"]
        color = ["orange", "blue", "green"]

        self.ax.stackplot(x, y1, y2, y3, labels=labels,colors=color)
        self.ax.legend(loc='upper left')
        self.ax.stackplot(x, y)
        self.fig.suptitle('Stackplot graph', size=9)


class MainWindow(QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

        self.canvas = Canvas()
        self.canvas1 = Canvas_2()
        self.canvas2 = Canvas_3()
        self.canvas3 = Canvas_4()

        self.graph_one.addWidget(self.canvas)
        self.graph_two.addWidget(self.canvas1)
        self.graph_three.addWidget(self.canvas2)
        self.graph_four.addWidget(self.canvas3)
        
        
if __name__ == "__main__":
     app = QApplication(sys.argv)
     w = MainWindow()
     w.show()
     sys.exit(app.exec_())

БЛОГ НА HUSL

Как сделать сделать такой график? С использованием библиотеки PyQt5

Ответы (2 шт):