# Flask實作_ext_21_Flask+Plotly.js
###### tags: `flask` `flask_ext` `python` `web` `plotly`
:::danger
官方文件：
* [plotly python](https://plot.ly/python/)
* [plotly.js](https://plot.ly/javascript/)
* [dash](https://dash.plot.ly/?_ga=2.165600185.723864294.1577885435-305527670.1548471508)
:::
目前資料處理所講究的是可視化，而不單純的是傳統的數字報表。可視化可以幫助使用者直觀的瞭解問題所在，但可視化除了圖表之外，還需要互動性，而不是一個靜態圖表(如SSRS)，在python上有不少選擇，但個人覺得plotly是一個較佳的選擇。
plot原本是收費軟體，但幾年前開源，`plotly`、`plotly.js`、`plot dash`，多個產品線都非常實用，目前`dash`的更新已經與初學時候差異甚多，功能性更加全面，非常建議一學。
## 說明
安裝的部份可以直接使用`pip`安裝，可參考[git](https://github.com/plotly/plotly.py)：
```shell
pip install plotly==4.4.1
```
個人使用的時候版本為3.5，目前最新已至4.4.1，但因為主要用它做json序列化的`cls`，應該是不至於有過多的差異。
而前端的引用可參考[git](https://github.com/plotly/plotly.js)上所說明的引用方式設置即可。
```javascript
<!-- Latest compiled and minified plotly.js JavaScript -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- OR use a specific plotly.js release (e.g. version 1.5.0) -->
<script src="https://cdn.plot.ly/plotly-1.5.0.min.js"></script>
<!-- OR an un-minified version is also available -->
<script src="https://cdn.plot.ly/plotly-latest.js" charset="utf-8"></script>
```
## 範例
設置一個測試用的Flask專案，套件簡單，不需要過於複雜：
```shell=
pip install flask plotly
```
第1行：安裝需求套件
新增一個Python文件，命名為`pyplot.py`
```python=
import json
import plotly as py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
# 設置圓餅圖資料
pie = {
'values': [100, 50, 30, 20],
'labels': ['香蕉', '蘋果', '水梨', '草莓'],
'type': 'pie'
}
# 將相關圖表物件以list方式寫入
graphs = [
dict(
data=[
pie
],
layout=dict(
width='100%',
height='100%'
)
)
]
# 序列化
graphJSON = json.dumps(graphs, cls=py.utils.PlotlyJSONEncoder)
return render_template('pyplot.html', graphJSON=graphJSON)
if __name__ == '__main__':
app.debug = True
app.run()
```
加入`templates`資料夾，並建立一個html文件，命名為`pyplot.html`：
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div>
<div id="graph-1"></div>
</div>
<!-- Latest compiled and minified plotly.js JavaScript -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
var graphs = {{ graphJSON|safe }};
Plotly.plot("graph-1",
graphs[0].data,
graphs[0].layout || {});
</script>
<meta charset="UTF-8">
<title>Title</title>
</body>
</html>
```
第7行：設置一個div tag，稍後放置圖表使用
第10行：引用`plotly.js`
第12行：利用filter取用後端送來的json物件
第13行：利用`Plotly.plot`指定預放置圖表的tag、data以及layout，其中data與layout都是在後端設置好的
執行專案，確認狀況：
## 結論
一個簡單的案例就可以看到`plotly.js`的實用性，如果是`plotly dash`的話甚至可以連javascript都不用寫就做出非常精美的看板。
另外，如果有多個圖表要放，你可以放置多個圖表物件到`graphs`內，像這樣：
```python=
graphs = [
dict(
data=[
xy,
],
layout=dict(
autosize='false',
width='100%',
height='100%',
title='Month Daily Cost',
xaxis={
'type': 'date',
'title': 'cost date'
},
yaxis={
'title': 'cost'
}
)
),
dict(
data=[
pie
],
layout=dict(
width='100%',
height='100%'
)
)
]
```
Sign in with Wallet
Connect another wallet