Plotly-Dash Graph - 显示在形状后面的文本注释

Question

看起来这应该相当简单，但我试图在 dcc.Graph 组件上覆盖文本注释。我有一个坐标字典，指定绘图上注释的位置，我还包括由 SVG 路径定义的形状。我希望所有注释（作为基线用例）都具有黑色文本 (#000000)，但它们似乎是在后面形状本身呈现的。目前是否有确保将它们带到前面的方法？

这是一个最小的工作示例：

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

labels = {'Point 1': (3.5,5), 'Point 2': (1.5,2), 'Point 3': (3.5,8)}
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([

    html.H1('Test', id='test', style={'margin': 50}),

    dcc.Graph(id='my-plot', style={'margin': 10}),

])

@app.callback(
    Output('my-plot', 'figure'),
    [Input('test', 'children')])
def update_graph(val):

    return {

        'data': [go.Scatter(
            x=[v[0]],
            y=[v[1]],
            text=k,
            mode='text'
        ) for k, v in labels.items()],

        'layout': go.Layout(
            margin={'l': 40, 'b': 40, 't': 40, 'r': 40},
            shapes=[
                {
                    'type': 'path',
                    'path': ' M 1 1 L 1 3 L 4 1 Z',
                    'fillcolor': 'rgba(44, 160, 101, 0.5)',
                    'line': {
                        'color': 'rgb(44, 160, 101)',
                    }
                },
                {
                    'type': 'path',
                    'path': ' M 3,7 L2,8 L2,9 L3,10, L4,10 L5,9 L5,8 L4,7 Z',
                    'fillcolor': 'rgba(255, 140, 184, 0.5)',
                    'line': {
                        'color': 'rgb(255, 140, 184)',
                    }
                },
            ]
        )
    }

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

见下文，其中形状的填充颜色修改了文本注释的呈现颜色：

Answer 1

向 shapes 的每个元素添加 'layer': 'below' 会将形状移到背景中，即标签文本和网格线将在前景中。

[...]

shapes=[{'layer': 'below',
         'type': 'path',
         'path': ' M 1 1 L 1 3 L 4 1 Z',
         'fillcolor': 'rgba(44, 160, 101, 0.5)',
         'line': {'color': 'rgb(44, 160, 101)'}
        },
        {'layer': 'below',
         'type': 'path',
         'path': ' M 3,7 L2,8 L2,9 L3,10, L4,10 L5,9 L5,8 L4,7 Z',
         'fillcolor': 'rgba(255, 140, 184, 0.5)',
         'line': {'color': 'rgb(255, 140, 184)'}
        }
       ]

[...]

Plotly-Dash Graph - 显示在形状后面的文本注释

Plotly-Dash Graph - Text Annotations Showing Behind Shapes

python

plotly

plotly-dash