在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,结果是这样的:
两个就堆叠在一个柱子上了~