用 Python 抓取 Ubike 開放資料 (顯示篇)

抓完資料，接著就是要用畫面來呈現囉！我使用 Django 搭配 Bootstrap，並引入 Chart.js 來繪製圖表

網頁建置

用 Django 建立起基本網頁，架構如下 (只列出重要文件)

├── bike
 │ ├── admin.py
 │ ├── models.py
 │ ├── templatetags //自訂的template filter
 │ │ ├── init.py
 │ │ └── myfilter.py
 │ └── views.py
 ├── db.sqlite3
 ├── manage.py
 ├── statics
 │ ├── css
 │ │ ├── bootstrap.css //bootstrap css
 │ │ ├── bootstrap.min.css
 │ │ └── custom.min.css
 │ ├── fonts
 │ └── js
 │ ├── bootstrap.min.js //bootstrap js
 │ └── Chart.js //繪製圖表 js
 ├── templates //網頁樣板
 │ ├── base.html
 │ ├── display.html
 │ ├── history.html
 │ ├── index.html
 │ └── status.html
 ├── views.py
 └── web
 ├── init.py
 ├── settings.py
 ├── urls.py
 └── wsgi.py

連接資料庫

Django 本身有一個 SQLite 資料庫，但我不打算使用他，而是透過 MySQLdb 套件，進入 MySQL 存取資料

例如把靜態資料給顯示出來，會在 view.py 中寫

def show(request):
    conn = None
    try:
        conn = MySQLdb.connect(host = "localhost", user = "root", passwd = "123456", db = "bike")
        c = conn.cursor()
        conn.set_character_set('utf8')
        c.execute("SELECT * FROM info ORDER BY sno")
        r = c.fetchall()
        conn.close()
    except socket.error as serror:
        if conn is not None:
            conn.close()
    return render(request, "display.html", locals())

fetchall() 拿回來的資料是 tuple 包著 tuple 的形式。因此在 template 取值時，要使用迴圈，或是 r.0 這個方式，而不能像存取 list 的用法一樣用 r[0] 詳情可看這篇文章

 Access tuple in django template

最後可以把靜態資料顯示出來如下

同樣方式做一個每分鐘的即時顯示

這裡需要注意的是 bar 的顯示，因為可使用量與種數量分別是兩個變數，如果要在 template 中做運算，需要註冊一個 template filter，我的作法如下：

建立一個 myfilter.py 檔案，位置就如同架構所示，旁邊還要有個 init.py

# myfilter.py
from django import template
register = template.Library()
@register.filter
def divideToPercent(value, arg):
return int(float(value) / float(arg) *100)

在 temaplte 中引入自己的 filter，就可以做除法運算，算出百分比囉

{% load myfilter %}
<td>
    <div class="progress progress-striped active">
        <div class="progress-bar" style="width: {{b.3|divideToPercent:b.2}}%">
        </div>
    </div>
</td>

更多用法，請看官網的說明

 Custom template tags and filters

繪製圖表

我直接使用 chart.js 這個繪製工具庫，把 example 稍微修改一下，繪製歷史資料

PS.因為主機並非在台灣，上圖的時間並不是很正確，這部份之後會調整

參考資料

• bootswatch flatly版型
• Access tuple in django template
• Custom template tags and filters
• chart圖表