Plotly：如何根据悬停获取的值编辑文本输出？

Question

我正在使用下面的代码在plotly dash中显示x和y的值。但是我想在"value"文本框下面再添加一个文本框。

这个文本框叫做“Category”，也就是说，如果显示的y值是：5k，那么类别就是“不是很贵”；如果值是20k，那么类别就是“价格一般”；如果值是30k，那么类别就是“太贵了”。

我该怎么实现这个功能呢？以下是可以运行的代码，能够显示鼠标悬停时的值。

import json
from textwrap import dedent as d
import pandas as pd
import plotly.graph_objects as go
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output
from jupyter_dash import JupyterDash

# app info
app = JupyterDash(__name__)

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

# data and basic figure
x = np.arange(20)+10

fig = go.Figure(data=go.Scatter(x=x, y=x**2, mode = 'lines+markers'))
fig.add_traces(go.Scatter(x=x, y=x**2.2, mode = 'lines+markers'))

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure=fig,
    ),

    html.Div(className='row', children=[
        html.Div([
            dcc.Markdown(d("""
              Click on points in the graph.
            """)),
            html.Pre(id='hover-data', style=styles['pre']),
        ], className='three columns'),
    ])
])


@app.callback(
    Output('hover-data', 'children'),
    [Input('basic-interactions', 'hoverData')])
def display_hover_data(hoverData):
    return json.dumps(hoverData, indent=2)

app.run_server(mode='external', port = 8070, dev_tools_ui=True,
          dev_tools_hot_reload =True, threaded=True)

相关问题：

• 暂无相关问题

Answer 1

根据你设置的以下修改：

    if hoverData['points'][0]['y'] >= 5000:
        Category = 'not Pricey'
    if hoverData['points'][0]['y'] >= 20000:
        Category = 'average price'
    if hoverData['points'][0]['y'] >= 30000:
        Category = 'Too pricey'
    
    output = json.dumps({'Date:':hoverData['points'][0]['x'],
                         'Value:':hoverData['points'][0]['y'],
                         'Category':Category
                        }, indent = 2)

...下面的代码片段会生成如下应用：

你没有为小于5000的值指定类别，所以现在只返回了一个空字符串。试试看，告诉我效果如何。

import json
from textwrap import dedent as d
import pandas as pd
import plotly.graph_objects as go
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output
from jupyter_dash import JupyterDash

# app info
app = JupyterDash(__name__)

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

# data and basic figure
y = np.arange(100)+20
x = pd.date_range(start='1/1/2021', periods=len(y))

fig = go.Figure(data=go.Scatter(x=x, y=y**2, mode = 'lines+markers'))
fig.add_traces(go.Scatter(x=x, y=y**2.2, mode = 'lines+markers'))

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure=fig,
    ),

    html.Div(className='row', children=[
        html.Div([
            dcc.Markdown(d("""
              Click on points in the graph.
            """)),
            html.Pre(id='hover-data', style=styles['pre']),
        ], className='three columns'),
    ])
])


# The text field would be called "Category" so that if the y value displayed is:
# 5k then category = not pricey or if value is 20k then category = average price and
# if value is 30k then category = too pricey.

@app.callback(
    Output('hover-data', 'children'),
    [Input('basic-interactions', 'hoverData')])
def display_hover_data(hoverData):
    global hd
    hd = hoverData
    Category = ''
    try:
        output = json.dumps({'Date:':hoverData['points'][0]['x'],
                           'Value:':hoverData['points'][0]['y']}, indent = 2)
        
        if hoverData['points'][0]['y'] >= 5000:
            Category = 'not Pricey'
        if hoverData['points'][0]['y'] >= 20000:
            Category = 'average price'
        if hoverData['points'][0]['y'] >= 30000:
            Category = 'Too pricey'
        
        output = json.dumps({'Date:':hoverData['points'][0]['x'],
                             'Value:':hoverData['points'][0]['y'],
                             'Category':Category
                            }, indent = 2)
        
        print(output)
        return output

            
    except:
        return None

app.run_server(mode='external', port = 8070, dev_tools_ui=True,
          dev_tools_hot_reload =True, threaded=True)