在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，结果是这样的：

两个就堆叠在一个柱子上了~