基于python从redmine-api中获取项目缺陷数据并可视化（2）

感悟时分

上一篇文章讲到缺陷数据的获取实现方式，这篇文章主要讲讲如何通过web框架flask将获取到的数据进行
web数据可视化

1.调研python web框架

一开始想通过html＋js＋highcharts去实现数据可视化，但是实现起来不方便而且本人js及前端开发了解甚
少，所以还是借助web框架。故调研了以下框架进行对比分析，最终选取了flask框架

2.安装搭建web框架

2.1.安装flask

安装flask最便捷的方式是使用虚拟环境，这是一个python解释器的一个私有副本，即virtualenv。
我用的是python3.6，在命令窗口用：

$pip3 install virtualenv*
即可自动安装,安装完虚拟环境，则要开始使用了，在你的项目文件的目录执行：

$virtualenv venv*
出现下面结果，那么恭喜你你的第一个虚拟环境就建好了。

1. <p>
   
2. </p><p> ~ pip3 install virtualenvCollecting virtualenv  Downloading virtualenv-15.1.0-py2.py3-none-any.whl (1.8MB)    100% |████████████████████████████████| 1.8MB 650kB/sInstalling collected packages: virtualenvSuccessfully installed virtualenv-15.1.0➜  ~ cd /Users/zhangmeiyuan/PycharmProjects/MyProject➜  MyProject lsTEST     test1.py➜  MyProject virtualenv venvUsing base prefix '/Library/Frameworks/Python.framework/Versions/3.6'New python executable in /Users/zhangmeiyuan/PycharmProjects/MyProject/venv/bin/python3.6Also creating executable in /Users/zhangmeiyuan/PycharmProjects/MyProject/venv/bin/python</p><p>Installing setuptools, pip, wheel...done.</p><p>virtualenv 安装完毕，你可以立即打开 shell 然后创建你自己的环境。在python3下由于在MAC上自带pyvenv，不用额外安装。</p><p>我用的是mac：故操作如下：</p><p>
   
3. </p><p>mkdir .pyvenv</p><p>cd .pyvenv</p><p>pyvenv flask_venv</p><p>source flask_venv/bin/activate</p><p> cd /Users/zhangmeiyuan/PycharmProjects/MyProject➜  MyProject mkdir .pyvenv➜  MyProject cd .pyvenv➜  .pyvenv pyvenv flask_venvWARNING: the pyenv script is deprecated in favour of `python3.6 -m venv`➜  .pyvenv source flask_venv/bin/activate</p><p>(flask_venv) ➜  .pyvenv </p><p>启动成功后，会在前面多出 flask_env字样，如下所示</p>

复制代码

zhangmeiyuan-4:.pyvenv zhangmeiyuan$ source flask_venv/bin/activate
(flask_venv) zhangmeiyuan-4:.pyvenv zhangmeiyuan$
接下来就可以在虚拟环境中安装包，不影响外貌的环境

pip3 install requests
pip3 install flask_sqlalchemy
pip3 install pymysql
pip3 install flask
pip3 install flask-script
pip3 install flask-migrate
退出虚拟环境
deactivate

2.2Flask 创建代码工程

体验 Flask
有一点准备工作要做，既然 Flask 是一个 MVC 的 web 框架，我们就得按照 MVC 的模式来对代码文件分层。

首先我们创建一个工作的文件目录
$ mkdir -p bug_report/app
$ mkdir -p bug_report/app/static
$ mkdir -p bug_report/app/templates
Tips: 我们的应用程序包是放置于 app 文件夹中。子文件夹static
用来存放静态文件例如图片，JS 文件以及样式文件。子文件夹templates是存放模板文件类的html文件。

接下来我们进入到 app 文件夹中，并创建init.py和views.py
$ cd bug_report/app
$ touch __init__.py
$ touch views.py
上面创建项目是直接在命令行进行，也可以打开pycharm创建flask项目

location为项目路径
interpreter为解释器路径，我们可以将这里更改为自己创建的虚拟环境中的解释器，
第一次添加需要add local，选定制定虚拟环境文件夹flask_env/bin/python3.6，
创建好后默认会出现一个简单的flask程序

让我们编写第一个视图函数(文件app/views.py
)
#!/usr/bin/env python
# -*- coding: utf-8 -*-
from flask import flask

app = Flask(__name__)

@app.route('/')
@app.route('/index')
def index():
    return "Hello, World!"
if __name__ == '__main__':
    app.run(host='localhost', port=8888, debug=True)
Flask自带一个Web服务器，Run这个文件后，就会开始监听，可以使用,出现如下提示

/Users/zhangmeiyuan/PycharmProjects/MyProject/.pyvenv/flask_venv/bin/python3.6 /Users/zhangm
eiyuan/PycharmProjects/bug_report/app/views.py
* Running on http://localhost:8888/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: 117-803-899
在浏览器输入http://localhost:8888/index，最终效果图如下

以上flask框架已经基本搭建完成，可以在已经建好的项目中进行编程实现缺陷数据可视化

3.采用pygal charts＋flask＋mysql实现缺陷数据可视化

3.1框架设计

流程框架如下：



代码目录框架如下：

1. <p>├── pycache</p><p>│ └── mysql_save.cpython-36.pyc</p><p>├── app</p><p>│ ├── init.py</p><p>│ ├── pycache</p><p>│ │ ├── init.cpython-36.pyc</p><p>│ │ └── views.cpython-36.pyc</p><p>│ ├── static</p><p>│ │ └── pygal-tooltips.min.js</p><p>│ ├── templates</p><p>│ │ ├── charts.html</p><p>│ │ └── config.py</p><p>│ └── views.py</p><p>├── fix_period.py</p><p>├── mysql_save.py</p><p>└── run.py</p>

复制代码

3.2实现过程

从上一篇文章写到，从redmine获取到的数据将存在mysql中，所以Flask + sqlalchemy 是一种不错的选择，
由于自己此前完全未接触过 flask,基本是零基础边学边用，对于网页展示动态数据，摸索了很久才弄明白
其实现方式原理，而且遇到各种各样的调试问题，所以这块的功能实现的时间比较长也比较坎坷。

数据展示层的代码如下：由于涉及业务内容，只拿（三种类型的图）出来展示

1. <p>
   
2. </p><p>def bugdata():</p><p>   try:</p><p>       conn = pymysql.connect(host='localhost', user='root', passwd='****', db='test', charset='utf8')</p><p>   except Exception as e:</p><p>       print(e)</p><p>       sys.exit()</p><p>   cursor = conn.cursor()</p><p>   sql = "select distinct category,bugs from priority_line where bank='***' "</p><p>  </p><p>   sql3 = "select distinct date_time,newbug,closebug from bug_line where bank='***' "</p><p>
   
3. </p><p>   sql5 = "select distinct period_time,bugs from period_line where bank='***' "</p><p>   cursor.execute(sql)</p><p>   alldata = cursor.fetchall()</p><p>   print(alldata)</p><p>   cursor.execute(sql2)</p><p>   alldata1 = cursor.fetchall()</p><p>   print(alldata1)</p><p>  </p><p>   cursor.execute(sql4)</p><p>   alldata3 = cursor.fetchall()</p><p>  </p><p>
   
4. </p><p>   title = " This is a  demo"</p><p>   pie_chart = pygal.Pie()</p><p>   </p><p>   pie_chart.title = '电子账户4.2_priority_bug'</p><p>   line_chart = pygal.Line()</p><p>   line_chart1 = pygal.Bar()</p><p>   line_chart.title = '电子账户4.2_bug_trend'</p><p>＃饼图</p><p>   if alldata:</p><p>       for rec in alldata:</p><p>           print(rec[0], rec[1])</p><p>           pie_chart.add(rec[0], rec[1])</p><p>       chart = pie_chart.render_data_uri()</p><p>   pie_chart2.title = '电子账户4.2_author_bug'</p><p>#折线图</p><p>   if alldata2:</p><p>       date_time =[]</p><p>       new_bug = []</p><p>       close_bug = []</p><p>       for rec in alldata2:</p><p>           date_time.append(rec[0])</p><p>           new_bug.append(rec[1])</p><p>           close_bug.append(rec[2])</p><p>       print(date_time)</p><p>       print(close_bug)</p><p>       line_chart.title = '电子账户4.2_Bug_trend'</p><p>       line_chart.x_labels=date_time</p><p>       line_chart.add('new_bug',new_bug)</p><p>       line_chart.add('close_bug',close_bug)</p><p>       chart1 = line_chart.render_data_uri()</p><p>   </p><p> ＃柱形图</p><p>   line_chart1.title = '电子账户4.2_period_time'</p><p>   if alldata4:</p><p>       period_time = []</p><p>       bugs = []</p><p>       for rec in alldata4:</p><p>           period_time.append(rec[0])</p><p>           bugs.append(rec[1])</p><p>       print(period_time)</p><p>       print(bugs)</p><p>       line_chart1.title = '电子账户4.2_period_line'</p><p>       line_chart1.x_labels = period_time</p><p>       line_chart1.add('bugs', bugs)</p><p>       chart4 = line_chart1.render_data_uri()</p><p>
   
5. </p><p>   return render_template('charts.html', title=title,chart=chart,chart2=chart2,chart3=chart3,chart4=chart4)</p><p>
   
6. </p><p>   cursor.close()</p><p>   conn.close()</p><p>
   
7. </p><p>if __name__ == '__main__':</p><p>   app.run(host='localhost', port=8888, debug=True)</p><p>charts.html代码如下</p><p>
   
8. </p><p><!DOCTYPE html></p><p><html></p><p><head></p><p>
   
9. </p><p>    <meta charset="utf-8"></p><p>    <script type="text/javascript" src="{{url_for('static',filename='pygal-tooltips.min.js')}}"></script></p><p>    <script type="text/javascript" src="http://kozea.github.com/pygal.js/javascripts/svg.jquery.js"></script></p><p></head></p><p>
   
10. </p><p><body></p><p>**************</p><p>隐藏</p><p>**************</p><p>    <h3 style="text-align:center;">电子账户4.2_质量分析报告可视化</h3></p><p>    <div id="chart"></p><p>        <embed type="image/svg+xml" src={{ chart|safe}}></embed></p><p>        <embed type="image/svg+xml" src={{ chart3|safe}}></embed></p><p>        <embed type="image/svg+xml" src={{ chart1|safe}}></embed></p><p>        <embed type="image/svg+xml" src={{ chart4|safe}}></embed></p><p>    <embed type="image/svg+xml" src={{ chart2|safe}}></embed></p><p>    </div></p><p> author: Jammy</p><p></body></p><p>
    
11. </p><p></html></p>

复制代码

最后成果如下（后续还将继续优化展示结果、新增维度分析及支持多个项目缺陷数据图片查询）：