用 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

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

請支持《傑瑞窩在這》原創文章。原文標題:用 Python 抓取 Ubike 開放資料 (顯示篇),原文網址:https://jerrynest.io/python-get-ubike-opendata-display/

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

這裡需要注意的是 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.因為主機並非在台灣,上圖的時間並不是很正確,這部份之後會調整


參考資料

樂於分享、盡情玩耍的全端工程師。長期關注資訊安全、雲端運算與網路行銷等議題,曾獲得玉山黑客松金牌,擔任過軟體測試實習生、技術文案寫手。

2 個回應

  1. 請問這在範例有放在GitHub嗎?
    最近在學python,爬文到貴站
    目前就剩這篇django
    如果可以的話,希望可以看一下這篇的source
    感恩

發表迴響