时间戳

首页 > 解决方案 > 向用户发出丢失数据的信号

plotly - 向用户发出丢失数据的信号

问题描述

我有一个折线图，用户可以在其中选择 x 范围。然后回调从数据库请求给定 x 范围的数据并显示它。

但是，选择的 x 范围可能没有任何数据，从而导致一个空图，看起来有点笨拙。向用户表明所选 x 范围没有数据的好方法是什么？

这是我放在一起的一个小例子。通过在图表上拖动选择来选择 4 到 11（不包括）之间的某个 x 范围将导致图表为空。

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

app = dash.Dash()
app.layout = html.Div([dcc.Graph(id='my-graph'), dcc.Store(id='my-data')])

@app.callback(Output('my-data', 'data'),
                    Input('my-graph', 'relayoutData'),)
def update_data(relayout_data):
    start, end = 1, 14
    if isinstance(relayout_data, dict):
        if 'xaxis.range[0]' in relayout_data and 'xaxis.range[1]' in relayout_data:
            start = relayout_data['xaxis.range[0]']
            end   = relayout_data['xaxis.range[1]']
    return pull_data(start, end)

def pull_data(start, end): # imagine this being a DB request or similar
    x = [1,2,3,4,11,12,13,14]
    x = [i for i in x if start <= i <= end]
    y = [i**2 for i in x]
    return [x,y]

@app.callback(Output('my-graph', 'figure'),
                    Input('my-data', 'data'),)
def update_graph(data):
    print("selected data:", data)
    x, y = data
    fig = go.Figure(data=go.Scatter(x=x, y=y))
    fig.update_yaxes(fixedrange=True)
    if not x:
        pass # what could I do here?
    return fig

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

标签： plotlymissing-dataplotly-dashplotly-python

解决方案

我现在发现的一种方法是添加一个非常明显的注释来通知用户丢失的数据，如下所示：

if not x:
    fig.add_annotation(text='No data in chosen x range',
        xref='paper', yref='paper', x=0.5, y=0.5, showarrow=False,
        font=dict(size=24), bgcolor="rgba(255,127,14,0.5)",)

确切的位置（x和y），font size当然bgcolor可以调整。也可以使用 的visible参数fig.add_annotation进行进一步控制。

对于问题中选择的示例，它仍然有点笨拙，因为 x 轴范围不会准确，但至少告诉用户发生了什么。

编辑：在以后的用例中，拥有准确的 x 轴范围对我来说很重要，其中 x 轴的类型为 date。幸运的是，如果所选范围的 和 也被存储，则很容易手动设置，如下start所示：endfig.update_xaxes(range=[start,end])

推荐阅读