在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 dashimport dash_core_components as dccimport dash_html_components as htmlimport plotly.graph_objs as gofrom dash.dependencies import Output, Inputapp = dash.Dash()server = app.serverdef get_show_bar():sctx = ['/1/1', '/1/2', '/1/3', '/1/4', '/1/5','/1/6', '/1/7', '/1/8', '/1/9', '/1/10',# '/1/11', '/1/12', '/1/13', '/1/14', '/1/15',# '/1/16', '/1/17', '/1/18', '/1/19', '/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-1hoverinfo='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，结果是这样的：
两个就堆叠在一个柱子上了~
![[pyecharts学习笔记]——Bar 柱状图/条形图](https://900zi.500zi.com/uploadfile/img/15/3/8ba6f714d5213f65a040ca82c2d077d6.jpg)
