上一篇文章講到缺陷數(shù)據(jù)的獲取實(shí)現(xiàn)方式，這篇文章主要講講如何通過web框架flask將獲取到的數(shù)據(jù)進(jìn)行web數(shù)據(jù)可視化

1.調(diào)研python web框架

一開始想通過html＋js＋highcharts去實(shí)現(xiàn)數(shù)據(jù)可視化，但是實(shí)現(xiàn)起來不方便而且本人js及前端開發(fā)了解甚少，所以還是借助web框架。故調(diào)研了以下框架進(jìn)行對(duì)比分析，最終選取了flask框架

web框架調(diào)研對(duì)比.png

2.安裝搭建web框架

2.1.安裝flask

安裝flask最便捷的方式是使用虛擬環(huán)境，這是一個(gè)python解釋器的一個(gè)私有副本，即virtualenv。
我用的是python3.6，在命令窗口用：

$pip3 install virtualenv*

即可自動(dòng)安裝,安裝完虛擬環(huán)境，則要開始使用了，在你的項(xiàng)目文件的目錄執(zhí)行：

$virtualenv venv*

出現(xiàn)下面結(jié)果，那么恭喜你你的第一個(gè)虛擬環(huán)境就建好了。

 ~ 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
Installing setuptools, pip, wheel...done.

virtualenv 安裝完畢，你可以立即打開 shell 然后創(chuàng)建你自己的環(huán)境。在python3下由于在MAC上自帶pyvenv，不用額外安裝。
我用的是mac：故操作如下：

mkdir .pyvenv
cd .pyvenv
pyvenv flask_venv
source flask_venv/bin/activate

 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
(flask_venv) ?  .pyvenv 

啟動(dòng)成功后，會(huì)在前面多出 flask_env字樣，如下所示

zhangmeiyuan-4:.pyvenv zhangmeiyuan$ source flask_venv/bin/activate
(flask_venv) zhangmeiyuan-4:.pyvenv zhangmeiyuan$ 

接下來就可以在虛擬環(huán)境中安裝包，不影響外貌的環(huán)境

pip3 install requests
pip3 install flask_sqlalchemy
pip3 install pymysql 
pip3 install flask
pip3 install flask-script
pip3 install flask-migrate

退出虛擬環(huán)境
deactivate

2.2Flask 創(chuàng)建代碼工程

體驗(yàn) Flask
有一點(diǎn)準(zhǔn)備工作要做，既然 Flask 是一個(gè) MVC 的 web 框架，我們就得按照 MVC 的模式來對(duì)代碼文件分層。

1. 首先我們創(chuàng)建一個(gè)工作的文件目錄

$ mkdir -p bug_report/app
$ mkdir -p bug_report/app/static
$ mkdir -p bug_report/app/templates

Tips: 我們的應(yīng)用程序包是放置于 app 文件夾中。子文件夾static
用來存放靜態(tài)文件例如圖片，JS 文件以及樣式文件。子文件夾templates是存放模板文件類的html文件。

2. 接下來我們進(jìn)入到 app 文件夾中，并創(chuàng)建init.py和views.py

$ cd bug_report/app 
$ touch __init__.py 
$ touch views.py

3. 上面創(chuàng)建項(xiàng)目是直接在命令行進(jìn)行，也可以打開pycharm創(chuàng)建flask項(xiàng)目

screenshot.png

location為項(xiàng)目路徑
interpreter為解釋器路徑，我們可以將這里更改為自己創(chuàng)建的虛擬環(huán)境中的解釋器，
第一次添加需要add local，選定制定虛擬環(huán)境文件夾flask_env/bin/python3.6，
創(chuàng)建好后默認(rèn)會(huì)出現(xiàn)一個(gè)簡(jiǎn)單的flask程序

4. 讓我們編寫第一個(gè)視圖函數(shù)(文件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自帶一個(gè)Web服務(wù)器，Run這個(gè)文件后，就會(huì)開始監(jiān)聽，可以使用,出現(xiàn)如下提示

/Users/zhangmeiyuan/PycharmProjects/MyProject/.pyvenv/flask_venv/bin/python3.6 /Users/zhangmeiyuan/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，最終效果圖如下

screenshot.png

以上flask框架已經(jīng)基本搭建完成，可以在已經(jīng)建好的項(xiàng)目中進(jìn)行編程實(shí)現(xiàn)缺陷數(shù)據(jù)可視化

3.采用pygal charts＋flask＋mysql實(shí)現(xiàn)缺陷數(shù)據(jù)可視化

3.1框架設(shè)計(jì)

流程框架如下：

生成缺陷數(shù)據(jù)可視化流程圖.png

3.2實(shí)現(xiàn)過程

從上一篇文章寫到，從redmine獲取到的數(shù)據(jù)將存在mysql中，所以Flask + sqlalchemy 是一種不錯(cuò)的選擇，由于自己此前完全未接觸過 flask,基本是零基礎(chǔ)邊學(xué)邊用，對(duì)于網(wǎng)頁展示動(dòng)態(tài)數(shù)據(jù)，摸索了很久才弄明白其實(shí)現(xiàn)方式原理，而且遇到各種各樣的調(diào)試問題，所以這塊的功能實(shí)現(xiàn)的時(shí)間比較長(zhǎng)也比較坎坷。

數(shù)據(jù)展示層的代碼如下：由于涉及業(yè)務(wù)內(nèi)容，只拿（三種類型的圖）出來展示

def bugdata():
   try:
       conn = pymysql.connect(host='localhost', user='root', passwd='****', db='test', charset='utf8')
   except Exception as e:
       print(e)
       sys.exit()
   cursor = conn.cursor()
   sql = "select distinct category,bugs from priority_line where bank='***' "
  
   sql3 = "select distinct date_time,newbug,closebug from bug_line where bank='***' "

   sql5 = "select distinct period_time,bugs from period_line where bank='***' "
   cursor.execute(sql)
   alldata = cursor.fetchall()
   print(alldata)
   cursor.execute(sql2)
   alldata1 = cursor.fetchall()
   print(alldata1)
  
   cursor.execute(sql4)
   alldata3 = cursor.fetchall()
  

   title = " This is a  demo"
   pie_chart = pygal.Pie()
   
   pie_chart.title = '電子賬戶4.2_priority_bug'
   line_chart = pygal.Line()
   line_chart1 = pygal.Bar()
   line_chart.title = '電子賬戶4.2_bug_trend'
＃餅圖
   if alldata:
       for rec in alldata:
           print(rec[0], rec[1])
           pie_chart.add(rec[0], rec[1])
       chart = pie_chart.render_data_uri()
   pie_chart2.title = '電子賬戶4.2_author_bug'
#折線圖
   if alldata2:
       date_time =[]
       new_bug = []
       close_bug = []
       for rec in alldata2:
           date_time.append(rec[0])
           new_bug.append(rec[1])
           close_bug.append(rec[2])
       print(date_time)
       print(close_bug)
       line_chart.title = '電子賬戶4.2_Bug_trend'
       line_chart.x_labels=date_time
       line_chart.add('new_bug',new_bug)
       line_chart.add('close_bug',close_bug)
       chart1 = line_chart.render_data_uri()
   
 ＃柱形圖
   line_chart1.title = '電子賬戶4.2_period_time'
   if alldata4:
       period_time = []
       bugs = []
       for rec in alldata4:
           period_time.append(rec[0])
           bugs.append(rec[1])
       print(period_time)
       print(bugs)
       line_chart1.title = '電子賬戶4.2_period_line'
       line_chart1.x_labels = period_time
       line_chart1.add('bugs', bugs)
       chart4 = line_chart1.render_data_uri()

   return render_template('charts.html', title=title,chart=chart,chart2=chart2,chart3=chart3,chart4=chart4)

   cursor.close()
   conn.close()

if __name__ == '__main__':
   app.run(host='localhost', port=8888, debug=True)

charts.html代碼如下

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <script type="text/javascript" src="{{url_for('static',filename='pygal-tooltips.min.js')}}"></script>
    <script type="text/javascript" src="http://kozea.github.com/pygal.js/javascripts/svg.jquery.js"></script>
</head>

<body>
**************
隱藏
**************
    <h3 style="text-align:center;">電子賬戶4.2_質(zhì)量分析報(bào)告可視化</h3>
    <div id="chart">
        <embed type="image/svg+xml" src={{ chart|safe}}></embed>
        <embed type="image/svg+xml" src={{ chart3|safe}}></embed>
        <embed type="image/svg+xml" src={{ chart1|safe}}></embed>
        <embed type="image/svg+xml" src={{ chart4|safe}}></embed>
    <embed type="image/svg+xml" src={{ chart2|safe}}></embed>
    </div>
 author: Jammy
</body>

</html>

最后成果如下（后續(xù)還將繼續(xù)優(yōu)化展示結(jié)果、新增維度分析及支持多個(gè)項(xiàng)目缺陷數(shù)據(jù)圖片查詢）：

all.png

1.png

bug_trend.png

period_line.png

status_line.png