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图形-在形状后面显示文本注释

1 个答案: