密谋：如何根据通过悬停获取的值来编辑文本输出？

Question

我正在使用以下代码在点划线上显示x和y值。但是然后，我希望能够在“值” 文本字段下面添加另一个文本字段。

该文本字段将被称为“ 类别”，因此，如果显示的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

对您的设置进行了以下修改：

lst1 <- strsplit(df$sample_names, ",\\s+")
tapply(rep(df$sample_values, lengths(lst1)), unlist(lst1), FUN = sum)

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

您没有为 lowing 值指定小于5000的类别，因此现在仅返回一个空字符串。试试看，让我知道这对您有何帮助。

    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)