将表单添加到 Dash/Plotly 应用程序答案

【问题标题】：Adding form to Dash/Plotly app将表单添加到 Dash/Plotly 应用程序
【发布时间】：2019-01-21 01:40:06
【问题描述】：

好的，所以我想更进一步。我不知道是否可以用破折号。我想创建一个表单（可能是来自 Flask 的 WTForm ）。表单应该有 date 和 annotation/comments 部分。当有人提交表单时，它将保存到数据库中。然后破折号将读取它并显示在图表上。我的图表如下所示：在x-axis 上将是来自FlaskForm 的date，表示它存储在数据库中的事件，当我将鼠标悬停到那个确切的date 时，annotation 将显示在图表本身中类似于这个的东西：

现在，你能告诉我这是否可能吗？我应该使用什么工具？这只是一个概念，但我认为对每个人都有帮助。

【问题讨论】：

标签： python plotly dashboard plotly-dash

【解决方案1】：

在 plotly 中，您可以使用注释显示文本。示例：

import plotly.plotly as py
import plotly.graph_objs as go

trace1 = go.Scatter(
    x=[0, 1, 2, 3, 4, 5, 6, 7, 8],
    y=[0, 1, 3, 2, 4, 3, 4, 6, 5]
)

trace2 = go.Scatter(
    x=[0, 1, 2, 3, 4, 5, 6, 7, 8],
    y=[0, 4, 5, 1, 2, 2, 3, 4, 2]
)

data = [trace1, trace2]

layout = go.Layout(
    showlegend=False,
    annotations=[
        dict(
            x=2,
            y=5,
            xref='x',
            yref='y',
            text='max',
            showarrow=True,
            arrowhead=7,
            ax=0,
            ay=-40
         )
    ]
)

fig = go.Figure(data=data, layout=layout)

iplot(fig)

参考：https://plot.ly/python/text-and-annotations

希望能回答您的问题。另请参阅散点图中的mode='lines+markers+text'（plotly doc 的Adding Text to Data in Line and Scatter Plots 部分）

【讨论】：

感谢 Adarsa 的回答，但我想做一些完全不同的事情。
@rafael 你有没有找到通过flask-wtf 表单来做到这一点的方法？我知道您使用 dcc.components 在 Dash 中使用表单，因为我在 plotly 论坛上看到了您的帖子，但我想知道您是否知道如何按照您的问题中描述的方式进行操作，因为我需要同样的东西。谢谢

【解决方案2】：

这里已经很晚了，但请查看 dash-bootstrap-components 中的 dbc.Input。

https://dash-bootstrap-components.opensource.faculty.ai/l/components/input

有表单类型、输入等。

我会怎么做是添加一些输入等，以及一个提交按钮。提交按钮将触发创建图形、添加相关内容并将图形返回到图形的函数。

【讨论】：