客户端回调，用于在 Dash 中过滤数据和更新图表-解网

问：

我一直在尝试从客户端回调中更新一个数字（因为我在一个页面中有 5 个数字，性能问题）。我在这里使用示例客户端回调 |Dash for Python 文档 |剧情：

from dash import Dash, dcc, html, Input, Output
import pandas as pd
import json
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')
available_countries = df['country'].unique()

app.layout = html.Div([
    dcc.Graph(
        id='clientside-graph'
    ),
    dcc.Store(
        id='clientside-figure-store',
        data=[{
            'x': df[df['country'] == 'Canada']['year'],
            'y': df[df['country'] == 'Canada']['pop']
        }]
    ),
    'Indicator',
    dcc.Dropdown(
        {'pop' : 'Population', 'lifeExp': 'Life Expectancy', 'gdpPercap': 'GDP per Capita'},
        'pop',
        id='clientside-graph-indicator'
    ),
    'Country',
    dcc.Dropdown(available_countries, 'Canada', id='clientside-graph-country'),
    'Graph scale',
    dcc.RadioItems(
        ['linear', 'log'],
        'linear',
        id='clientside-graph-scale'
    ),
    html.Hr(),
    html.Details([
        html.Summary('Contents of figure storage'),
        dcc.Markdown(
            id='clientside-figure-json'
        )
    ])
])


@app.callback(
    Output('clientside-figure-store', 'data'),
    Input('clientside-graph-indicator', 'value'),
    Input('clientside-graph-country', 'value')
)
def update_store_data(indicator, country):
    dff = df[df['country'] == country]
    return [{
        'x': dff['year'],
        'y': dff[indicator],
        'mode': 'markers'
    }]


app.clientside_callback(
    """
    function(data, scale) {
        return {
            'data': data,
            'layout': {
                 'yaxis': {'type': scale}
             }
        }
    }
    """,
    Output('clientside-graph', 'figure'),
    Input('clientside-figure-store', 'data'),
    Input('clientside-graph-scale', 'value')
)

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

我的问题是我不想过滤数据然后存储它（在此示例中）dff = df[df['country'] == country]def update_store_data

我想按原样存储数据，然后在客户端回调中对其进行过滤，例如（），然后分配 x 和 y 值。这是否可行，如果可行，我应该如何存储数据？我想将其存储为对象的JSON数组比x和y数组更合适。谢谢！dff = df[df['country'] == 'Germany']

javascript python plotly-dash 客户端

clientside_callback(
    """
    function(figure_data, indicator) {
        var x_array = [];
        var y_array = [];
        var filtered_data = figure_data.filter(datum => datum["country"] === "Germany");
        filtered_data.forEach((arr)=>{x_array.push(arr.year)});
        filtered_data.forEach((arr)=>{y_array.push(arr.indicator)});
        
        var data = [{
        'x': x_array,
        'y': y_array,
    }]
        return {
            'data': data,
        }
    }
    """,
    Output('clientside-graph', 'figure'),
    [Input('clientside-figure-store', 'data'), Input('clientside-graph-indicator', 'value')]
)

上一个：如何在客户端处理上传的文件，而无需使用 Dash/Streamlit/Flask/其他东西将它们上传到服务器？

下一个：有没有办法使用像 react 这样的前端框架在浏览器客户端运行 Python 脚本？

客户端回调，用于在 Dash 中过滤数据和更新图表

Clientside callback to filter data and update graph in Dash

评论