使用pyQt5和matplotlib绘制图表

最近一直在做 “python 从入门到精通” 的学习，经过断断续续的学习，将学习成果分享一下。这里主要介绍一下使用 pyQt5和matplotlib结合绘制图表的例子，同时也用到了requests库

1 安装

首先安装 pyQt5、matplotlib、requests库
pip install pyqt5
pip install matplotlib
pip install requests

2 设计界面

在 Qt 的 designer 里面创建界面。我这里做的是城市的未来7天气温的预报图表。主要功能包括选择城市，添加城市，绘制图表

3 初始化界面

在代码中定义一个init_ui 函数，用来初始化在designer中设计的界面

'''
        初始化界面
        '''
        self.uifile = ResourcePath.resource_path(os.path.join('static/ui', 'main.ui'))
        self.ui = uic.loadUi(self.uifile)
        self.ui.setWindowTitle('未来一周天气预报')
        # TODO: 设置窗口图标
        self.filename_title = ResourcePath.resource_path(os.path.join('static/image', 'title.ico'))
        self.ui.setWindowIcon(QIcon(self.filename_title));

4 完成交互

在界面上点击“查询”按钮，绘制图表，点击“添加城市”按钮，弹出添加城市文本框。通过信号和槽完成。

# TODO: 确定按钮的槽函数
        self.ui.pushButtonQuery.clicked.connect(self.slot_query_btn)
        # TODO: 保存成图片的槽函数
        self.ui.pushButtonSave.clicked.connect(self.slot_save_btn)
        # TODO: 添加城市的槽函数
        self.ui.pushButtonAddCity.clicked.connect(self.slot_addcity_btn)
        # self.ui.comboBox_city.editTextChanged.connect(self.slot_test)
        # TODO: 添加城市的槽函数
        self.addCity.ui.pushButtonSubmitAddCity.clicked.connect(self.slot_addCityContent)

5 调用API，获取数据

这里我使用的是一个在线api,获取未来7天的最高气温和最低气温

#TODO: 从 api 获取数据
        url = f'https://v0.yiketianqi.com/api?city={city}&unescape=1&version=v9&appid=87791378&appsecret=1knAInmy'
        headers = {'Accept': 'application/json'}
        r = requests.get(url, headers=headers)
        if r.status_code==200:
            # 将返回的数据转换为字典类型 {}
            response_dict = r.json()
            # data 是列表 [],里面元素是字典
            data = response_dict['data']
            # 时间日期（x轴标签）,定义列表
            dateLabel = []
            # 最低气温列表
            temp1ValueList = []
            # 最高气温列表
            temp2ValueList = []
            # 湿度列表
            # 遍历列表
            for item in data:
                dateLabel.append(item['day'])
                temp1ValueList.append(item['tem1'])
                temp2ValueList.append(item['tem2'])

6 根据数据绘制图表

首先是将matplotlib的canvas插入到pyQt5中，然后再根据接口返回的数据，使用matplotlib绘制图表，这里绘制的是折线图

# TODO: 将 matplotlib 绘制的图片插入到 pyqt 中
        self.fig = plt.Figure()
        self.canvas = FC(self.fig)
        self.ui.verticalLayoutDrwaContainer.addWidget(self.canvas)
        # 其中参数111，指的是将图像分成1行1列，此子图占据从左到右从上到下的1位置。
        self.axes = self.fig.subplots()


		# TODO: 根据数据绘制图表
        # TODO: 删除原图，让画布上只有新的一次的图
        self.axes.clear()

        # TODO: 设置图表标题并给坐标轴添加标签
        self.axes.set_title(f'{city}未来7天{temp}', fontsize=12)
        self.axes.set_xlabel('日期', fontsize=12)
        self.axes.set_ylabel(f'{temp}', fontsize=12)

        self.axes.plot(dateLabel, temp1ValueList, linewidth=1.5, label='最低气温')
        self.axes.plot(dateLabel, temp2ValueList, linewidth=1.5, label='最高气温')

        # 图例
        handles, labels = self.axes.get_legend_handles_labels()
        self.axes.legend(handles, labels)

        # TODO: 这里开始绘制
        self.canvas.draw_idle()