在Dash的API文檔上，雖然把屬性都寫的很清楚了，可惜有些屬性自己不試試，光看解釋完全看不懂，甚至有些屬性用法都不太明白，是以自己耐着性子慢慢的把常用的又比較有意思的都試了一遍，在這裡記錄下~
API文檔：Dash-Bar API
柱形圖就是将一系列資料，轉化成可視化的柱狀圖譜，可以讓人很直覺的看出資料的問題是以，友善分析資料，接下來介紹每一個比較好用的屬性：
- x ： 橫軸的資料，一般預設是橫向的，那麼橫軸就表示資料的日期、類型之類的，如果你用的是縱向的，那麼請傳遞數值數組給它；（必要）
- y ： 縱軸的資料，同上面一樣，如果是橫向表示，那麼請傳遞數值資料，反之可以傳遞任意類型的數組；（必要）
- name ： 表示這個圖的名稱，如果你不填寫，預設名字‘tracexxx’，是第幾個就是trace幾，是以算比較重要；（必要）
- visible ： 控制柱形圖是否顯示，預設True，一般不需要設定；
- showlegend ： 控制壯行圖右邊小标簽是否顯示，預設True，一般不需要設定；
- legendgroup ： 設定标簽組，如果你的一幅圖譜中有很多柱形圖或折線圖，而他們是一類的，那麼可以設定這個，這樣他們可以同時顯示或者隐藏，友善對比檢視或管理；
- opacity ： 控制柱形圖的透明度，一般很少設定；0-1
- hoverinfo ： 設定浮标内容，附表内容是指滑鼠放在資料圖上時，需要顯示的内容，包括：‘x’、‘y’、‘z’、‘text’、‘name’、‘all’、‘none’、‘skip’，預設是‘all’，可以使用‘+’組合其中多個，一般也不需要設定；
- hoverlabel ： 設定浮标内容的格式，這是一個字典包含很多屬性：（重要）
|- bgcolor ： 浮标背景顔色，可以是一個顔色，也可以是顔色數組
|- bordercolor ： 浮标外框的顔色
|- font ： 設定字型樣式，也是個字典：
|- |- family ： 字型庫，可以選其中一個，一般不需要設定
|- |- size ： 字型大小
|- |- color ： 字型顔色
|- align ： 設定對齊方式，預設‘auto’，還可以‘left’、‘right’
|- namelength ： 顯示‘name’的字元串長度
- text ： 設定柱形圖顯示内容，有時候需要在每個柱形圖上顯示它具體多少，可以用到它，配合textposition使用；（重要）
- textposition ： 設定text的位置，預設是‘none’，需要設定為‘inside’或者‘outside’，否則text不會顯示；（重要）
- insidetextanchor ： 設定text對齊位置，預設是‘end’，可以是‘start’、‘middle’、‘end’；
- textangle ： 設定text旋轉角度，[-180， 180]，預設是‘auto’，可以不設定；
- textfont ： 設定text的樣式，也是一個字典：family、size、color；
- hovertext ： 會替換name屬性，顯示名稱，可以是數組；
- orientation ： 設定柱形圖方向，預設是‘v’橫向，‘h’是縱向；（重要）
- offset ： 設定偏移，可以整體偏移；
- width ： 設定寬度；
- marker ： 設定柱形圖的樣式，是一個字典，包含很多内容：（重要）
|- line ： 柱子的外框線的樣式，字典：
|- |- width ： 線的寬度；
|- |- color ： 線的顔色；
|- color ： 柱子的顔色，可以是一個顔色數組，也可以是數值數組，如果是數值的，可以用顔色深淺表示程度；（重要）
|- colorbar ： 如果需要一個深淺程度标尺，那麼就可以通過這個設定，這是一個字典：（重要）
|- |- thicknessmode ： 标尺寬度的模式，‘fraction’ 比例，‘pixels’ 像素；
|- |- thickness ： 标尺寬度值，fraction 是比例值，pixels 具體的像素值；
|- |- lenmode ： 标尺高度模式， 同thicknessmode；
|- |- len ： 标尺高度值，同thickness；
|- |- x ： 标尺x方向的位置，[-2, 3]之間；
|- |- xanchor ： 标尺x方向對齊方式，預設‘left’，還可以選擇‘center’、‘right’；
|- |- y： 同上x；
|- |- yanchor ： 标尺y方向對齊方式，預設‘middle’，還可以‘top’、‘bottom’；
|- |- tickformat ： 标尺上文字的比對格式，比如百分比‘.2%’，帶K的整數‘.2s’；
|- |- title ： 标尺名稱，是一個字典，也可以是一個字元串；
另外，可以在layout中用到的屬性是下面這些：
- barmode ： 設定多個柱形圖排布模式，預設‘group’，還以是‘stack’疊加、‘group’分組、‘overlay’重疊、‘relative’相關；（重要）
- barnorm ： 設定柱形圖縱軸或橫軸資料的表示形式，可以是分數‘fraction’、百分比‘percent’；
下面是一個小示例，裡面有兩個柱形圖，可以對比着看：
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from dash.dependencies import Output, Input
app = dash.Dash()
server = app.server
def get_show_bar():
sctx = [
'2019/1/1', '2019/1/2', '2019/1/3', '2019/1/4', '2019/1/5',
'2019/1/6', '2019/1/7', '2019/1/8', '2019/1/9', '2019/1/10',
# '2019/1/11', '2019/1/12', '2019/1/13', '2019/1/14', '2019/1/15',
# '2019/1/16', '2019/1/17', '2019/1/18', '2019/1/19', '2019/1/20',
]
scty1 = [
3607, 3834, 3904, 4080, 3997,
3999, 3956, 4106, 4371, 4401,
]
scty2 = [
4083, 3982, 3940, 3825, 3799,
3935, 4187, 4037, 3844, 3862,
]
trace1 = go.Bar(
x=sctx,
y=scty1,
name='食物類'
)
trace2 = go.Bar(
x=sctx, #橫軸名稱
y=scty2, #縱軸資料
name='娛樂類', #右邊小标簽名稱和浮标名稱
# visible=False, #控制柱狀圖是否顯示
# showlegend=False, #控制右邊小标簽是否顯示
# legendgroup='group1', #設定組名，比如娛樂類分為：遊樂場、景區、兒童樂園等，可以将這些設定為一組，這樣可以控制同時顯示或隐藏
# opacity=0.7, # 設定柱狀圖的透明度，0-1
hoverinfo='all', #設定浮标内容，‘x’、‘y’、‘z’、‘text’、‘name’、‘all’、‘none’、‘skip’，預設是‘all’，他們可以用‘+’組合使用
hoverlabel={ #設定浮标的樣式
#浮标背景顔色，可以是一個顔色，也可以是每個柱子都不一樣
'bgcolor': ['#FF0000', '#00FF00', '#0000FF', '#FF0000', '#00FF00', '#0000FF', '#FF0000', '#00FF00', '#0000FF', '#FF0000'],
'bordercolor': '#000000', #浮标外框顔色
'font': { #設定字型樣式
#字型類型，可以是單個統一字型，也可以是下面這樣的數組
'family': ['Arial', 'Balto', 'Courier New', 'Droid Sans', 'Droid Serif', 'Droid Sans Mono', 'Gravitas One', 'Old Standard TT', 'Open Sans', 'Overpass'],
'size': 20, #字型大小，同樣可以是數組，每個大小不一樣
'color': '#FFFFFF' #字型顔色，可以是數組，每個顔色不一樣
},
'align': 'left', #設定對齊方式，預設‘auto’，還可以是‘left’、‘right’
'namelength': 2, #顯示浮标中‘name’屬性的字元串長度
},
text=scty2, #設定浮标内容，可以是個數組，用于顯示每個條目的說明或者需要一直顯示的資料，配合textposition使用
#預設是‘none’，如果不設定，那麼text屬性不起作用，‘inside’、‘outside’。也可以是數組哦
textposition='inside',# ['inside', 'outside', 'inside', 'outside', 'inside', 'outside', 'inside', 'outside', 'inside', 'outside'],
insidetextanchor='start', #隻有當textposition全部為inside之後才起作用，預設是‘end’。‘start’、‘middle’、‘end’
textangle=90, #設定旋轉角度，目前沒看起作用，預設‘auto’
textfont={ #設定text的樣式
'family':'Courier New', #設定字型
'size': 16, #字型大小
'color': '#000' #字型顔色
},
# insidetextfont={}, #設定處于柱形圖内部時，text的樣式，屬性同上
# outsidetextfont={}, #設定處于柱形圖外部時，text的樣式，屬性同上
hovertext='另類收入', #設定浮标裡面的内容
# orientation='h', #設定柱形圖橫向還是縱向，預設是‘v’
# offset=0.1, #設定偏移，整體偏移
# width=0.2, #設定柱形圖的寬度
marker={ #設定柱形圖樣式
'line': { #設定線的樣式
'width': 4, #線的寬度
'color': '#00FF00', #先的顔色
},
#設定屬性圖的顔色，可以是單個顔色，也可以是數組，還可以是數字數組
# 'color': ['#123', '#234', '#345', '#456', '#567', '#789', '#89a', '#8ab', '#abc', '#bcd'],
'color': scty2, #這種可以用于設定根據資料用不同顔色來表示程度
# 'cmin': 0, #隻有‘color’為數字數組時才起作用
# 'cmax': 10, #隻有‘color’為數字數組時才起作用
# 'colorscale': 'Greys', #變成灰階圖
'colorbar': { #設定顔色标尺，可以看出程度
'thicknessmode': 'pixels', #設定标尺寬度模式，‘fraction’ 分數占比、‘pixels’ 像素值
'thickness': 12, #設定具體占比和像素大小，标尺的寬度，如果是像素，則使用整數
'lenmode': 'fraction', #标尺高度模式，‘fraction’ 分數占比、'pixels' 像素值
'len': 0.8, #标尺高度具體數值，如果是像素，則使用整數
'x': -0.08, #設定标尺位置，[-2, 3]之間
'xanchor': 'center', #标尺的對齊方式，‘left’、‘center’、‘right’，預設‘left’
'y': 0, #标尺的y位置
'yanchor': 'bottom', #标尺y軸對齊方式，‘top’、‘middle’、‘bottom’，預設‘middle’
'tickformat': '.2s', #設定标尺文字的比對格式，比如百分比'.2%', 帶k的整數'.2s'
'title': { #标尺的内容，可以隻是一個字元串，也可以像現在這樣設定一個字典
'text': '程度', #标尺的名稱
'font': {
'size': 16, #大小
'color': '#5982AD', #顔色
},
'side': 'top', #位置，‘right’、‘top’、‘bottom’，預設是‘top’
},
},
},
)
layout = go.Layout(
title='收入對比',
barmode='group', #可以分為 ‘stack’(疊加）、‘group’（分組）、‘overlay’（重疊）、‘relative’（相關）， 預設是‘group’
barnorm='', #設定柱形圖縱軸或橫軸資料的表示形式，可以是fraction（分數），percent（百分數）
yaxis={
# 'hoverformat': '.2%',
# 'showline': True,
# 'showgrid': True,
# 'side': 'right',
}
)
return go.Figure(
data=[trace1, trace2],
layout=layout
)
app.layout = html.Div([
dcc.Graph(
id='show_graph',
figure=get_show_bar()
),
html.Div(
id = 'show_click_content',
style={
'margin-top': 20,
'text-align': 'center',
'font-size': 30
}
)
], style={'margin': 100})
@app.callback(
Output('show_click_content', 'children'),
[
Input('show_graph', 'clickData'), #監聽點選事件，會将每個點的資訊帶出來
]
)
def show_click_content(clickdata):
if clickdata == None:
return ''
return str(clickdata)
if __name__ == '__main__':
app.run_server(debug=True) 然後運作之後的結果是這樣的：
如果我在layout那裡将barmode改為stack，結果是這樣的：
兩個就堆疊在一個柱子上了~