将水平线添加到 Dash-Plotly Python 仪表板

Question

我正在 Python3 中创建 Dash 应用程序。试图在条形图中添加一条水平线。文档中的示例适用于具有数字 x 和 y 轴的折线图，而我有一个分类 X 轴。下面的代码成功创建了图形，但没有显示形状对象。如何在此图表中添加一条水平线？

        html.Div(
                    [    dcc.Graph(
                            id='example-graph-23',
                            figure={
                                'data': [
                                    {'x': ['Overall', 'NBA', 'WWC', 'NFL'], 'y': [3,2,2.5],
                                     'type': 'bar', 'name': 'Instagram'},
                                          ],
                                'layout': {
                                    'yaxis' : dict(
                                            range=[0, 4]
                                            ),
                                    'plot_bgcolor': colors['background'],
                                    'paper_bgcolor': colors['background'],
                                    'font': {
                                        'color': colors['text']
                                    },
                                    'shapes' : dict(type="line",
                                                    x0=0,
                                                    y0=2,
                                                    x1=5,
                                                    y1=2,
                                                    line=dict(
                                                        color="Red",
                                                        width=4,
                                                        dash="dashdot",
                                                ))
                                }
                            }
                        ) ]
        , className="four columns"
                ),

Answer 1

您可以通过将 x 和 y 坐标添加到 figure.data 来添加垂直线，如下所示：

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()

colors = {'background': 'white', 'text': 'black'}
app.layout = html.Div(
                    [    dcc.Graph(
                            id='example-graph-23',
                            figure={
                                'data': [
                                    {'x': ['Overall', 'NBA', 'WWC', 'NFL'], 'y': [3,2,2.5],
                                     'type': 'bar', 'name': 'Instagram'},
                                    {'x': ['Overall', 'Overall'], 'y': [0, 4],
                                     'type': 'line', 'name': 'v_line_1'}, 
                                    {'x': ['NBA', 'NBA'], 'y': [0, 4],
                                     'type': 'line', 'name': 'v_line_2'}, 
                                    {'x': ['WWC', 'WWC'], 'y': [0, 4],
                                     'type': 'line', 'name': 'v_line_3'},                                    
                                          ],
                                'layout': {
                                    'yaxis' : dict(
                                            range=[0, 4]
                                            ),
                                    'plot_bgcolor': colors['background'],
                                    'paper_bgcolor': colors['background'],
                                    'font': {
                                        'color': colors['text']
                                    },
                                    'shapes' : dict(type="line",
                                                    x0=0,
                                                    y0=2,
                                                    x1=5,
                                                    y1=2,
                                                    line=dict(
                                                        color="Red",
                                                        width=4,
                                                        dash="dashdot",
                                                ))
                                }
                            }
                        )], className="four columns"
)


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

enter image description here