Plotly Dash - 改进具有垂直线外观的条形图

Question

我有一个不同类型及其位置的文件：

Agent 1
Person 2
Place 3
Location 4

我还有一个条形图（有 1 个条形图，开头是Agent ）。 我想在条形图中添加一些垂直线（出现在图例中）：

在左侧，我有另一个图表显示了类型的层次结构：

The idea is that when one of the types is selected it will change the selected type (I have not done the callback yet) and as you click on the types, see if the bar exceeds the vertical lines or not.

我还没有完成回调，因为首先我希望正确的图表（条形图 + 垂直线）看起来更好。 现在是这样的： 前面说了，开头显示的栏是Agent （显示每种类型的值无所谓，我要的是图形看是否超过垂直线）。

我一直在寻找不同的方法来实现这一目标，但我无法得到明显可以接受的结果。 如果有人能帮我解决这个问题，我将不胜感激。

由于您没有我用来制作数字的文件，我可以使用带有示例值的代码。 我想要一个有 1 个水平条和至少 1 个垂直线的示例，但我希望它看起来比我目前拥有的更好

这是我现在的代码：

def get_ontology_df():
   # Load dataframe
   df = pd.read_csv("ontologies.csv")
   return  df

def get_valid_types_df():
    # Load dataframe
    valid_types_df = pd.read_csv("valid_types.tsv", sep=' ',  names=["DBpedia type", "Nº entities", "Pos"])
    return valid_types_df

def get_ontology_figure():
    # Ontology treemap 
    fig2 =  go.Figure(go.Treemap(labels=ontology_df['labels'], parents=ontology_df['parents']))
    fig2.update_layout(margin=dict(t=0, b=0, r=0, l=0, pad=0), height=400, width=800)
    return fig2


def get_init_bar_figure_pos(df):
    # For displaying positional measures
    first_row=df.iloc[0]
    fig = go.Figure()
    fig.add_traces([
        go.Bar(x = [first_row[2]], y = [first_row[0]], width=[0.05] , orientation='h', marker_color='#A349A4', name = "DBpedia type"),
        go.Scatter(x=[0.1,0.1] , y=[first_row[0],5], line={'color' : '#FFC300', 'width' : 4}, name = 'Quartile 1')
        
        ])
    fig.update_layout(xaxis={'visible': False},yaxis={'range': [first_row[0], 7]}, margin=dict(t=0, b=0, r=0, l=0, pad=0), template = "simple_white")
    return fig



ontology_df = get_ontology_df()
valid_types = get_valid_types_df()

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP]) 
app.layout = html.Div(
    [
        html.H3("Positional measures"),
        html.Div([
         dcc.Graph(id='ontologyy', figure=get_ontology_figure(), style={'display': 'inline-block'}),
         dcc.Graph(id='es_instance_types', figure=get_init_bar_figure_pos(get_valid_types_df()), 
                                 style={'display': 'inline-block'})
        ]) 
    ]
    )

非常感谢您提前

Answer 1

我终于找到了一个替代方案，垂直线没有出现在图例中，但从美学上看它看起来更好。 我使用了Plotly 4.12引入的垂直线：

 fig.add_vline(x=1, line_width=3, line_color="green",
 annotation_text="10th percentile", 
 annotation_position="bottom right")