标签: plotly-dash

我有一个简单的 Dash 回调函数，如下所示：

@app.callback(
    dash.dependencies.Output('test_output', 'children'),
    [dash.dependencies.Input('test_input', 'value')]):
def process(val):
    return html.Div('test')

现在我要设置一些cookie。正如我们在 Dash 的源代码中看到的，包装函数使用序列化的返回数据创建普通的 Flask Response 对象：

def wrap_func(func):
    def add_context(*args, **kwargs):

        output_value = func(*args, **kwargs)
        response = {
            'response': {
                'props': {
                    output.component_property: output_value
                }
            }
        }

        return flask.Response(
            json.dumps(response,
                       cls=plotly.utils.PlotlyJSONEncoder),
            mimetype='application/json'
        )

    self.callback_map[callback_id]['callback'] = add_context

    return add_context

因此，如果这段代码是我项目的一部分，我会Response.set_cookie在这里使用。

会话的情况似乎有所不同 - 我可以从导致修改sessioncookie 的包装函数中访问和修改会话对象。

如何从 Dash 回调中设置和获取 cookie？也许 Flask 有办法在不直接创建 Response 对象的情况下完成这样的事情？

更新

我为此创建了一个问题： https ://github.com/plotly/dash/issues/182

并拉取请求以添加此功能： https ://github.com/plotly/dash/pull/183

我偶然发现了这篇文章，并使用了我自己的程序的最终答案的评论中提到的修改。但在我尝试使用以下代码对其进行测试之前：

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd

app = dash.Dash()

daterange = pd.date_range(start='1994',end='2018',freq='W')

app.layout = html.Div(children=[
    html.H1('Range Slider Testing'),
    html.Div(
        [
            html.Label('From 1994 to 2018', id='time-range-label'),
            dcc.RangeSlider(
                id='year_slider',
                min=daterange.min (),
                max=daterange.max (),
                value = [daterange.min(), daterange.max()],
                step='W',
            ),
        ],
        style={'margin-top': '20'}
    ),
    html.Hr(),

    dcc.Graph(id='my-graph')
])

@app.callback(
    dash.dependencies.Output('my-graph', 'figure'),
    [dash.dependencies.Input('year_slider', 'value')])
def _update_graph(year_range):
    date_start = '{}'.format(year_range[0])
    date_end = '{}'.format(year_range[1])

@app.callback(
    dash.dependencies.Output('time-range-label', 'children'),
    [dash.dependencies.Input('year_slider', 'value')])
def _update_time_range_label(year_range):
    return …

我正在尝试使用 Dash 显示数据框。我拥有的数据框是https://www.kaggle.com/timoboz/superbowl-history-1967-2020。我的目标是通过一个搜索按钮在网页上显示数据框，该按钮可动态搜索所有列并过滤数据框。

到目前为止，我有以下显示数据框的代码。

import pandas as pd
import dash
import dash_table
from dash.dependencies import Input, Output
df  = pd.read_csv('./Data/superbowl.csv')
PAGE_SIZE = 10
app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id='datatable-paging',
    columns=[
        {"name": i, "id": i} for i in df.columns #sorted(df.columns)
    ],
    page_current=0,
    page_size=PAGE_SIZE,
    page_action='custom',

    sort_action='custom',
    sort_mode='single',
    sort_by=[]
)


@app.callback(
    Output('datatable-paging', 'data'),
    [Input('datatable-paging', "page_current"),
     Input('datatable-paging', "page_size"),
     Input('datatable-paging', 'sort_by')])
def update_table(page_current,page_size,sort_by):
    if len(sort_by):
        dff = df.sort_values(
            sort_by[0]['column_id'],
            ascending=sort_by[0]['direction'] == 'asc',
            inplace=False
        )
    else:
        # No sort is applied
        dff = …

我正在尝试使用 Plotly 中的 Dash 构建一个仪表板，该仪表板由一系列图块（文本）组成，如下图所示。

我正在尝试构建一个组件以重用它并构建下面的布局。每个框将包含一个标题、一个值和一个描述，如下所示。

有可用的组件吗？有人可以帮助我了解任何基本的想法/代码吗？

提前致谢！

嗨 任何人都可以帮助建议？我在尝试从单击下载链接到 CSV 文件时从下拉选择过滤的数据表中导出正在填充的数据时遇到问题。

单击下载链接后出错

csv_string = dff.to_csv(index=False, encoding='utf-8')
AttributeError: 'str' object has no attribute 'to_csv'

下载的文件是一个包含 html 代码的文件。

在此处输入图片说明

下面的代码片段

csv_string = dff.to_csv(index=False, encoding='utf-8')
AttributeError: 'str' object has no attribute 'to_csv'

我目前正在使用以下脚本从我创建的破折号下载数据表。下载工作正常，但是当我在本地托管 Dash 并且当我尝试通过另一个系统单击下载按钮时，文件正在主机计算机而不是用户计算机上下载。如果我的问题看起来很愚蠢，我深表歉意，因为我对 Dash 和 python 非常陌生。

html.Button(id="save-button", n_clicks=0, children="Save"),
html.Div(id="output-1", children="Press button to save data at your desktop")


@app.callback(
    Output("output-1", "children"),
    [Input("save-button", "n_clicks")],
    [State("table", "data")])
def selected_data_to_csv(nclicks, table1):
    if nclicks == 0:
        raise dash.PreventUpdate
    else:
        df = pd.DataFrame(table1).to_csv(
            'C:\\Users\\'+loggedin_user + '\\Desktop\\Open_Queue_Dump.csv', index=False)
    return "Data Submitted"

我正在尝试dash_bootstrap_components.Collapse在我的dash应用程序中实现 a ，但它的行为存在问题。这里的代码，我不是自己写的，我只是从dash_bootstrap_components.Collapse 文档中复制过来的：

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash()

app.layout = html.Div([dbc.Button('Open collapse',
                                  id = 'collapse-button',
                                  className = 'mb-3',
                                  color = 'primary'),
                       dbc.Collapse(dbc.Card(dbc.CardBody('This content is hidden in the collapse')),
                                    id = 'collapse')])


@app.callback(Output('collapse', 'is_open'),
              [Input('collapse-button', 'n_clicks')],
              [State('collapse', 'is_open')])
def toggle_collapse(n, is_open):
    if n:
        return not is_open
    return is_open

if __name__ == "__main__":
    app.run_server()

这就是我得到的：

当我点击按钮时，没有任何反应。
我试图找出问题出在哪里，我发现：

• n在app.callback初始化为 …

我正在使用以下代码在Dash Plotly使用Dash-Bootstrap-Components库时创建一个简单的侧边栏。我的目标是通过重用上面的代码来实现collapsed sidebar如下面的gif所示。

我不是专家JavaScript，JQuery，CSS或其他工具，让我做这件事。我感谢任何帮助我实现我的目标。

提前致谢。

我对 dash 还很陌生，并试图将两个下拉菜单并排放置，但它们似乎根本不起作用，而是彼此位于下方。我想我搞砸了 HTML div 的“className”排列。代码如下：

app.layout = html.Div([

html.Div( [

    html.H1("Web Application Dashboards with Dash", style={'text-align': 'center'}),

 ] ),

html.Div(
className = "row",children =[
    html.Div(className='six columns', children=[
        dcc.Dropdown(
            id='dropdown_dataset',
                    options=[
                        {'label': 'diabetes', 'value': 'diabetes'},
                        {'label': 'Custom Data', 'value': 'custom'},
                        {'label': 'Linear Curve', 'value': 'linear'},
                    ],
                    value='diabetes',
                    clearable=False,
                    searchable=False,
        )])
    ,html.Div(className='six columns', children=[
        dcc.Dropdown(
        id='dropdown_dataset_2',
        options=[
            {'label': 'sinh', 'value': 'sinh'},
            {'label': 'tanh', 'value': 'cosh'},
        ],
        value='diabetes',[![enter image description here][1]][1]
        clearable=False,
        searchable=False,
    )])
  ])
  ])



  if __name__ == '__main__':
        app.run_server(host='127.0.0.1',port = …

是否可以在破折号中的图形底部有一个文本字段，以显示它们所在点的文本（将悬停数据显示为纯文本）。因此，当用户将鼠标悬停在某个点上时，文本框将能够进行更改。我已经定义了一个 dcc.Graph 组件和应用程序布局，但我不确定如何为 hoverdata 定义回调函数。

我使用下面的代码来定义 dcc.Graph 和 app.layout

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

app.layout = html.Div([
    dcc.Graph(figure=fig),
    
        html.Div([
                    dcc.Markdown(id='mpg-metrics')
                ],style={'width':'20%','display':'inline-block'})
])

任何有关回调的帮助都会很棒。提前致谢