python - 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

添加'layer': 'below'到 shapes 的每个元素都会将形状移动到背景，即标签文本将位于前景以及网格线。

[...]

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)'}
        }
       ]

[...]