如何创建一个可拖动的Plotly对象

Question

如何创建一个可拖动的Plotly对象

3

我有一个带有背景形状的Plotly直方图。如何使背景对象可以向右/向左拖动？

import numpy as np
import plotly.graph_objects as go

# generate data
data = np.random.normal(0,10,500)

# plot histogramm
fig = go.Figure()
fig.add_trace(go.Histogram(x=data))

# add shape
fig.add_shape(dict(type="rect", xref="x", yref="paper", 
                   x0=-22, x1=22,
                   y0=0, y1=1,
                   fillcolor="Gray", opacity=0.3,
                   layer="below", line_width=0, editable=True))

当前输出:

期望输出: 使形状对象可拖动。

编辑：背景对象不一定是“形状”。

- drops

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Derek O · Accepted Answer

免责声明：我在Dash方面经验不是很丰富，但这是我能够实现可移动形状的唯一方法。我在Plotly社区论坛中非常依赖chriddyp的这个答案。dcc.Graph的参数与go.Figure非常相似。

需要注意的一点是，只有当您的光标在形状内部时，您才能将其拖动，但如果您将光标悬停在靠近边框的任何其他位置，单击并拖动将改变形状的尺寸而不是移动它，这可能是您想要的行为，也可能不是。任何经常使用Dash的人都可以根据需要更新/改进我的答案。

import numpy as np

import json
from textwrap import dedent as d
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

# generate data, set seed for reproducibility
np.random.seed(42)
data = np.random.normal(0,10,500)

app = dash.Dash(
    __name__,
    external_stylesheets=[
        'https://codepen.io/chriddyp/pen/dZVMbK.css'
    ]
)


styles = {'pre': {'border': 'thin lightgrey solid', 'overflowX': 'scroll'}}

app.layout = html.Div(className='row', children=[
    dcc.Graph(
        id='basic-interactions',
        className='six columns',
        figure={
            'data': [{
                'x': data,
                'name': 'Trace 1',
                'type': 'histogram'
            }],
            'layout': {
                'shapes': [{
                    'type': 'rect',
                    'x0': -22,
                    'x1': 22,
                    'xref': 'x',

                    'y0': 0,
                    'y1': 50,
                    'yref': 'y',

                    'fill': 'toself',
                    'line': dict(
                        color="Gray",
                        width=0.5,
                    ),
                    'fillcolor': 'Gray',
                    'layer': 'below'
                }]
            }
        },
        config={
            'editable': True,
            'edits': {
                'shapePosition': True
            }
        }
    ),
])

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