[Python-Matplotlib] 动态图表绘制来达到实时监控

一年后重新登录CSDN，才发现原来有人会看这个东西的。 重新调整了下这文章.......

工作期间很少用CSDN 了， 如果有问题想问的可以发邮件给我.....QQ邮箱就是我用户名里的数字...

需求:

当时因为网速的问题， 使我们的系统加载都很慢。 为了知道一天下来到底有多少时间，加载网页时间是很慢的，然后跟公司的IT撕去才写的这个东西。大概就是自动登录系统后， 统计完全加载页面所需要的时间， 然后绘制动态图+表。  

代码部分参考了大神的  https://blog.csdn.net/yc_1993/article/details/54933751。建议先去大神那里看完再来这看， 虽然我当时也是一看就懂， 一做就报错.......

除了大神实现的效果外，我还另外加上了滚动条与暂停功能。代码中还包含了一些小的功能，例如可以对每个数值进行设置y-value。但是我综合考虑了最终的效果，最后都注释掉了，如果有需要的话，可以取消注释来使用。

最终效果如下：

图像会根据数据实时进行更新，也就是数据跟图像都是实时刷新的。表格会显示最近的五个数值。如果直接拉动滚动条的话，可能反应会有点慢。可以先按下 “Pause” 按钮，暂停绘图，然后拉动下方的滚动条来回顾过去的数据。

 

代码分为两个部分，一部分是数据如何产生，第二部分为图表绘制。

1. 数据产生

数据是实时产生的(初始是没有的，需要成功登录网页后获取到相关数据后才有)，利用Selenium，每5秒刷新某网页，并调用JS "Windonw.performance.timing“ 来计算完全加载所需时间，并得到当前时间。有关Selenium的使用，可以谷歌相关的用法， 我还另外写了个坑点总结 [Python-Selenium] 入门总结+坑点陈列

2. 图表绘制

利用ion来绘制动态图。那么分为三大部分

1. 1)  初始值的设定 
2. 2）框架的定义
3. 3）数据传入并绘制
4. 4 ) 关闭ion并显示图像

重点讲解下一下几点

• 数据如何传入

简单来说就是要让数据的两个因素, dtime还有onloadingtime能够传入，需要结合下面的调用环节来理解。这里就是简单地在函数DetectionPlot那里传入参数，并把新得到的参数，附加成为列表类型。

• 横纵坐标的设定

self.loadingGraph.xaxis.set_ticks(self.timestamp1)
self.loadingGraph.yaxis.set_ticks(self.loadingValue1)

如果直接设置了set_ticks的话，那么以下这几行代码将不会生效，图标的横纵坐标就会不断地压缩， 而不是动态的调整轴的最小最大值。

self.loadingGraph.set_ylim(
                min(self.loadingValueRange), max(self.loadingValueRange))
self.loadingGraph.set_xlim(
                self.timestampRange[1] - dt.timedelta(minutes=1), self.timestampRange[1])

另外注意一点就是，如果你想横坐标是时间，你需要首先将时间从string类型转换为datetime类型，这样才能够与datetime.timedelta进行相加减。然后利用下面的两行代码，将横坐标的格式定义为datetime类型，那么Matplotlib就能帮你处理。纵坐标也是相同的道理。

self.dateFormat = DateFormatter("%m-%d %H:%M:%S")
self.loadingGraph.xaxis.set_major_formatter(ticker.FuncFormatter(self.dateFormat))

• 滚动条与暂停功能

这两个部分，就是首先定义相关的位置，然后与功能函数挂钩。Matplotlib的API上有相关的简介。

这里具体说一下，由于横坐标是时间类型，那么怎么设置滚动条涅？

首先Slider定义上包含了一个最小值，跟最大值。这里要对datetime类型进行转换。

功能定义函数上，就要转换为datetime类型，要不然matplotlib识别不了。然后就是利用拉动的变量来定义横坐标。

# Add a scroll bar
        self.axcolor = 'lightgoldenrodyellow'
        self.axsb = fig.add_axes([0.06, 0.25, 0.65, 0.02], facecolor=self.axcolor)

#Slider setting
        self.ssb = Slider(self.axsb, 'Scrollbar',
                              dates.date2num(self.timestampRange[0]),
                              dates.date2num(self.timestampRange[1]))
        self.ssb.on_changed(self.update)

#Define the slider update function
    def update(self,val):
        self.sb=self.ssb.val
        self.xmin_time=dates.num2date(self.sb)-dt.timedelta(minutes=1)
        self.xmax_time=dates.num2date(self.sb)
        self.loadingGraph.axis([self.xmin_time,self.xmax_time,min(self.loadingValueRange), max(self.loadingValueRange)])
        fig.canvas.draw_idle()</