绘图系统系列：将matplotlib嵌入到tkinter

封装成类

在理解matplotlib嵌入到tkinter中的原理之后，就已经具备了打造绘图系统的技术基础，接下来要做的，就是做一个较有可读性的绘图类，其实就是把前面的代码封装到class里而已，代码如下

import tkinter as tk
import tkinter.ttk as ttk

import matplotlib as mpl
mpl.use('TkAgg')
import matplotlib.pyplot as plt
from matplotlib.backends.backend_tkagg import (
    FigureCanvasTkAgg, NavigationToolbar2Tk)
from matplotlib.figure import Figure

class DarwSystem():
    def __init__(self):
        self.root = tk.Tk()
        self.root.title("数据展示工具")

        frmCtrl = ttk.Frame(self.root,width=320)
        frmCtrl.pack(side=tk.RIGHT)
        self.setFrmCtrl(frmCtrl)

        frmFig = ttk.Frame(self.root)
        frmFig.pack(side=tk.LEFT,fill=tk.BOTH,expand=tk.YES)
        self.setFrmFig(frmFig)
        
        self.root.mainloop()
    
    def setFrmCtrl(self, frmCtrl):
        pass

    def setFrmFig(self, frmFig):
        self.fig = Figure()
        self.canvas = FigureCanvasTkAgg(self.fig,frmFig)
        self.canvas.get_tk_widget().pack(
            side=tk.TOP,fill=tk.BOTH,expand=tk.YES)
        self.toolbar = NavigationToolbar2Tk(self.canvas,frmFig,
            pack_toolbar=False)
        self.toolbar.update()
        self.toolbar.pack(side=tk.RIGHT)

其中，setFrmCtrl用于设置控制面板，暂且pass掉，但后续会实现诸多功能；setFrmFig用于设置绘图界面，其中self.fig就是绘图窗口，后续若要画图，都要在这里设置坐标轴。

布局

最简单的绘图系统，也至少需要三个部件，分别用于输入x值、y值以及点击绘图按钮，从而setFrmCtrl函数可以先写为下面的形式

def setFrmCtrl(self, frmCtrl):
    frm = ttk.Frame(frmCtrl)
    frm.pack(side=tk.TOP, fill=tk.X)
    self.setCtrlButtons(frm)

    frm = ttk.Frame(frmCtrl)
    frm.pack(side=tk.TOP, fill=tk.X)
    self.setFrmX(frm)

    frm = ttk.Frame(frmCtrl)
    frm.pack(side=tk.TOP, fill=tk.X)
    self.setFrmY(frm)

这里面总计用了3个frm，分别用于存放控制按钮，设置x数据和y数据的模块，这三个模块的布局又分别设计了三个函数，即setFrmX, setFrmY以及setCtrlButtons：

def setFrmX(self, frm):
    tk.Label(frm, text="x").pack(side=tk.LEFT)
    self.xEntry = tk.Entry(frm)
    self.xEntry.pack(side=tk.LEFT, fill=tk.X)

def setFrmY(self, frm):
    tk.Label(frm, text="y").pack(side=tk.LEFT)
    self.yEntry = tk.Entry(frm)
    self.yEntry.pack(side=tk.LEFT, fill=tk.X)


def setCtrlButtons(self, frm):
    tk.Button(frm, text="绘图",width=5,
        command=self.btnDrawImg).pack(side=tk.LEFT)

# 绘图函数
def btnDrawImg(self):
    pass

其中btnDrawImg是绘图函数，尚未实现，所以被pass掉了，此时的布局结果如下，非常简单

实现绘图功能

接下来就是最核心的功能，实现绘图，主要包括两个步骤，一是读取x和y的值，二是用二者的值完成图像的绘制。

简单起见，这里用eval函数直接读取python表达式，同时为了让不熟悉Python的人也可以顺利生成x序列，将np.linspace隐去。则xEntry和yEntry的读取过程可写为

def btnDrawImg(self):
    x = eval(f"np.linspace({self.xEntry.get()})")
    self.ys = eval(self.yEntry.get())
    self.xs = x
    self.drawPlot()

self.drawPlot就是核心的绘图函数，主要流程与命令行调用plt如出一辙，首先创建一个坐标轴，然后在坐标轴上绘图，区别是最后需要调用self.canvas中的引擎来完成图像绘制

def drawPlot(self):
    self.fig.clf()
    ax = self.fig.add_subplot()
    ax.plot(self.xs, self.ys)
    self.fig.subplots_adjust(left=0.1, right=0.95, top=0.95, bottom=0.08)
    self.canvas.draw()

结果如下

状态栏的这些工具都可以无缝使用，非常便捷。