1 說明

1.1 plotly高階視覺化作圖與flask框架web結合，程式碼拿來即可使用。

1.2 環境：熟悉我的都知道，linux作業系統、python3.8.

1.3 相關安裝：省略，簡單。

2 柱狀圖為基本例子

2.1 檔案結構

2.2 bar.html程式碼：程式碼基本不變，僅僅需要對相關文字進行修改，即可，後續注意名字對應修改即可。（bar.html和bar.py）

from flask import render_templatefrom flask import Flaskimport plotly as pyimport plotly.graph_objs as goapp = Flask(__name__)@app.route('/')def index(): pyplt = py.offline.plot #---以下因為圖形和資料不同而不同，以下需要修改--- trace0 = go.Bar( x=['A類戶型', 'B類戶型', 'C類戶型'], y=[20, 14, 23], text=['27%市場佔有率', '24%市場佔有率', '19%市場佔有率'], marker=dict( color='rgb(158,202,225)', line=dict( color='rgb(8,48,107)', width=1.5, ) ), opacity=0.6 ) data = [trace0] layout = go.Layout( title='xxx視覺化作圖', ) fig = go.Figure(data=data, layout=layout) #---以上需要複製修改的程式碼塊--- div = pyplt(fig, output_type='div', include_plotlyjs=False, auto_open=False, show_link=False) context = {} context['graph'] = div #注意名字需要相應的修改：此處為bar.html，記住將template中的也要相應修改 return render_template("bar.html", title = 'Home', context = context) if __name__ == '__main__': app.run() 

2.4 效果圖

3 line.py需要修改的程式碼部分：注意檔名改成：line.html

trace0 = go.Line( x=['A類戶型', 'B類戶型', 'C類戶型'], y=[20, 14, 23], text=['27%市場佔有率', '24%市場佔有率', '19%市場佔有率'], marker=dict( color='rgb(158,202,225)', line=dict( color='rgb(8,48,107)', width=1.5, ) ), opacity=0.6 ) data = [trace0] layout = go.Layout( title='xxx視覺化作圖', ) fig = go.Figure(data=data, layout=layout)

4 pie.py需要修改的程式碼部分：注意檔名改成：pie.html

 #定義數值 labels = ['產品1','產品2','產品3','產品4','產品5'] values = [38.7,15.33,19.9,8.6,17.47] #定義trace或者data trace = [go.Pie(labels=labels, values=values)] layout = go.Layout(title = 'plotly的pie圖') fig = go.Figure(data = trace, layout = layout)

5 scatter.py需要修改的程式碼部分：注意檔名改成：scatter.html

 import numpy as np data = go.Scatter( y = np.random.randn(500), mode = 'markers', marker = dict( size = 16, color = np.random.randn(500), colorscale = 'Viridis', showscale = True ) ) layout = go.Layout(title = 'plotly的Scatter的散點圖') fig = go.Figure(data = data, layout = layout)

6 shanpie.py需要修改的程式碼部分：注意檔名改成：shanpie.html

 #資料定義 labels = ['產品1', '產品2','產品3', '產品4', '產品5'] values = [30, 25, 15, 22, 8] colors = ['#FFFF00', '#FF0000', '#E066FF', '#0D0D0D'] #trace或者data資料定義 trace = [go.Pie( labels = labels,  values = values, rotation = 30, opacity = 1, showlegend = False, #圖例顯示否，True就是顯示 pull = [0.1,0,0,0,0], #0.1為第一組資料出來pull=產品1=30的那一組 hoverinfo = 'label+percent',  textinfo = 'percent', # textinfo = 'value', textfont = dict(size = 30, color = 'white'), marker = dict(colors = colors, line = dict(color = '#000000', width = 2))  ) ] fig = go.Figure(data = trace)

7 stackbar.py需要修改的程式碼部分：注意檔名改成：lstackbar.html

 trace1 = go.Bar( x=['giraffes', 'orangutans', 'monkeys'], y=[20, 14, 23], name='SF Zoo' ) trace2 = go.Bar( x=['giraffes', 'orangutans', 'monkeys'], y=[12, 18, 29], name='LA Zoo' ) data = [trace1, trace2] #堆疊柱狀圖 layout = go.Layout(barmode='stack',title = 'plotly的堆疊柱狀圖') fig = go.Figure(data=data, layout=layout)

以上其他圖略。