Plot.ly/Dash:删除项目图表周围的所有空白

Question

背景：我的应用程序中有一个子弹形图，我希望它是“内联”。因此，我想显示最低限度的信息。

我已经简化了它很多:没有标题，没有传奇，没有互动按钮。

问题:然而，，仍然有很大的顶部和底部的垫子，我无法摆脱。

目前的情况如下：

​

…我希望它看起来像这样：

​

(它适用于基本条形图上的相同设置，如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。