Question

背景：我的应用程序中有一个bullet chart，我希望它是“内联”的。因此，我想显示最少的信息。

我进行了很多简化：没有标题，没有图例，没有交互按钮。

问题： 但是，仍然有大量的顶部和底部填充垫我无法摆脱。

当前看起来像这样：

...，我希望它看起来像这样：

（它在基本条形图上使用相同的设置，如MWE中所示）

问题：

如何删除上方项目符号图中的顶部和底部填充？

MWE：

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.figure_factory as ff

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.Div(
            [
                html.Span('Foo |'),
                dcc.Graph(
                    id='example-graph',
                    figure=dict(
                        data=[
                            {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                            {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
                        ],
                        layout=dict(
                            paper_bgcolor='#fcc',
                            height='42px',
                            margin=dict(
                                t=0,
                                r=0,
                                b=0,
                                l=0,
                            ),
                        ),
                    ),
                    style=dict(
                        border='solid 2px red'
                    ),
                    config=dict(
                        displayModeBar=False
                    ),
                ),
            ],
            style=dict(
                display='flex',
                margin='10px',
            )
        ),
        html.Div(
            [
                html.Span('Bar |'),
                dcc.Graph(
                    id='bullet-chart',
                    figure=ff.create_bullet(
                        orientation='h',
                        ranges='range',
                        measures='data',
                        data=[dict(
                            range=[.4, .5, 1],
                            data=[0, .42],
                        )],
                        paper_bgcolor='#fcc',
                        margin=dict(
                            t=0,
                            r=0,
                            b=0,
                            l=0,
                        ),
                        title=None,
                        width=500,
                        height=210,
                        hovermode=False,
                    ),
                    style=dict(
                        border='solid 2px red'
                    ),
                    config=dict(
                        displayModeBar=False
                    ),
                ),
            ],
            style=dict(
                display='flex',
                margin='10px',
            )
        )
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True)

Answer 1

您可以向包含您的 Graph 的 div 添加一些样式。

简化示例：

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.figure_factory as ff

app = dash.Dash(__name__)

bullet = ff.create_bullet(
    orientation="h",
    ranges="range",
    measures="data",
    data=[
        dict(
            range=[0.4, 0.5, 1],
            data=[0, 0.42],
        )
    ],
    paper_bgcolor="#fcc",
    margin=dict(
        t=0,
        r=0,
        b=0,
        l=0,
    ),
    title=None,
    width=500,
    height=210,
    hovermode=False,
)

app.layout = html.Div(
    [
        html.Span("Bar |"),
        html.Div(
            children=[
                dcc.Graph(
                    id="bullet-chart",
                    figure=bullet,
                    config=dict(displayModeBar=False),
                ),
            ],
            style=dict(
                display="flex",
                alignItems="center",
                overflow="hidden",
                height=70,
                width=500,
                border="2px solid red",
            ),
        ),
    ],
    style=dict(display="flex")
)

if __name__ == "__main__":
    app.run_server(debug=True)

结果：

如果您想要更少的水平空间，请进一步减小 height。

Plot.ly/Dash：删除项目符号图表周围的所有填充

1 个答案: