抓完資料,接著就是要用畫面來呈現囉!我使用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.因為主機並非在台灣,上圖的時間並不是很正確,這部份之後會調整


參考資料