快捷導航

PyQt5+QtChart實現(xiàn)繪制區(qū)域圖

更新時間：2022年12月16日 09:54:57 作者：SongYuLong的博客

QChart是一個QGraphicScene中可以顯示的QGraphicsWidget。本文將利用QtChart實現(xiàn)區(qū)域圖的繪制，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下

PyQt5 QtChart-區(qū)域圖

QAreaSeries用于創(chuàng)建區(qū)域圖數(shù)據(jù)，傳入兩個QLineSeries對象。核心代碼：

series0 = QLineSeries()
series1 = QLineSeries()
area = QAreaSeries(series0, series1)

示例代碼

import sys
from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtCore import Qt
from PyQt5.QtChart import QAreaSeries, QLineSeries, QSplineSeries, QValueAxis, QChart, QChartView


class MyAreaWindow(QWidget):
    def __init__(self, parent=None):
        super(MyAreaWindow, self).__init__(parent)
        self.setWindowTitle("區(qū)域圖")
        chart = QChart()
        chartView = QChartView()
        
        # 創(chuàng)建Series
        series0 = QLineSeries()
        series1 = QLineSeries()

        # 添加數(shù)據(jù)
        series0 << QPointF(1, 5) << QPointF(3, 7) << QPointF(7, 6) << QPointF(9, 7) \
        << QPointF(12, 6) << QPointF(16, 7) << QPointF(18, 5)
        series1 << QPointF(1, 3) << QPointF(3, 4) << QPointF(7, 3) << QPointF(8, 2) \
        << QPointF(12, 3) << QPointF(16, 4) << QPointF(18, 3)

        # 創(chuàng)建區(qū)域圖
        area = QAreaSeries(series0, series1)
        area.setName("面積")

        # 設(shè)置畫筆, pen用于畫區(qū)域的邊框
        pen = QPen(Qt.red)
        pen.setWidth(3)
        area.setPen(pen)

        # 設(shè)置畫刷,brush用于填充區(qū)域
        brush = QBrush(Qt.yellow)
        area.setBrush(brush)

        # gradient = QLinearGradient(QPointF(0, 0), QPointF(0, 1))
        # gradient.setColorAt(0.0, QColor(0x3cc63c))
        # gradient.setColorAt(1.0, QColor(0x16f626))
        # gradient.setCoordinateMode(QGradient.ObjectBoundingMode)
        # area.setBrush(gradient)

        chart.addSeries(area)
        chart.createDefaultAxes()
        chart.axisX().setRange(0, 20)
        chart.axisY().setRange(0, 10)

        chartView.setChart(chart)
        chartView.setRenderHint(QPainter.Antialiasing)

        vbox = QVBoxLayout()
        vbox.addWidget(chartView)
        self.setLayout(vbox)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    win = MyAreaWindow()
    win.show()
    sys.exit(app.exec_())

效果圖

補充

當然除了上面的方法，小編還為大家準備了另一種可以實現(xiàn)區(qū)域圖繪制的方法，希望對大家有所幫助

import sys
from PyQt5.QtCore import Qt, QPointF
from PyQt5.QtGui import QPainter, QPen, QLinearGradient, QColor
from PyQt5.QtWidgets import QApplication, QMainWindow
from  PyQt5.QtChart import QChartView, QChart, QLineSeries, QAreaSeries
 
class DemoChartArea(QMainWindow):
    def __init__(self, parent=None):
        super(DemoChartArea, self).__init__(parent)   
        
         # 設(shè)置窗口標題
        self.setWindowTitle('實戰(zhàn) Qt for Python: QChart面積圖演示')      
        # 設(shè)置窗口大小
        self.resize(480, 360)
        
        self.createChart()
        
    def createChart(self):
        
        #面積圖的上下兩條曲線
        #注意line0和line1的生存周期!!!!!
        self.line0 = QLineSeries()
        self.line1 = QLineSeries()
        
        self.line0 << QPointF(1, 5) << QPointF(3, 7) << QPointF(7, 6) << QPointF(9, 7) << QPointF(12, 6) << QPointF(16, 7) << QPointF(18, 5)
        self.line1 << QPointF(1, 3) << QPointF(3, 4) << QPointF(7, 3) << QPointF(8, 2) << QPointF(12, 3) << QPointF(16, 4) << QPointF(18, 3)
        
        #面積圖
        areaSeries = QAreaSeries(self.line0, self.line1)
        areaSeries.setName('蝙蝠俠') #Batman
        
        pen = QPen(QColor(0x059605))
        pen.setWidth(3)
        areaSeries.setPen(pen)
        
        #漸變設(shè)置
        gradient = QLinearGradient(QPointF(0,0), QPointF(0, 1))
        gradient.setColorAt(0.0, QColor(0x3cc63c))
        gradient.setColorAt(1.0, QColor(0x26f626))
        gradient.setCoordinateMode(QLinearGradient.ObjectBoundingMode)
        areaSeries.setBrush(gradient)
              
        #創(chuàng)建圖表
        chart = QChart()
        chart.addSeries(areaSeries)
        chart.setTitle('簡單面積圖示例')
        chart.createDefaultAxes()
        chart.axes(Qt.Horizontal)[0].setRange(0, 20) #橫坐標數(shù)值范圍
        chart.axes(Qt.Vertical)[0].setRange(0, 10) #縱坐標數(shù)值范圍
         
        #圖表視圖
        chartView = QChartView(chart)
        chartView.setRenderHint(QPainter.Antialiasing)
        
        self.setCentralWidget(chartView)
      
        
if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = DemoChartArea()
    window.show()
    sys.exit(app.exec())

效果圖