向 Dash-Plotly Python 儀表板添加水平線

Question

我正在 Python3 中創建一個 Dash 應用程序。 試圖在條形圖中添加一條水平線。 文檔中的示例適用於折線圖，它具有數字 x 和 y 軸，而我有一個分類 X 軸。 下面的代碼成功創建了圖形，但沒有顯示形狀 object。 如何在該圖中添加一條水平線？

        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)

在此處輸入圖像描述