抓完資料,接著就是要用畫面來呈現囉!我使用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

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

bike4

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

bike3

這裡需要注意的是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稍微修改一下,繪製歷史資料

bike5

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


參考資料

bootswatch flatly版型

Access tuple in django template
Custom template tags and filters
chart圖表