[表格实时动态编辑的屏幕截图]
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd
from dash.dependencies import Input, Output
threshold = 0.5
################################################################
###################### Table Data ##############################
################################################################
metrics_index = [
"AUC",
"Accuracy",
"Kappa",
"Sensitivity (Recall)",
"Specificity",
"Precision",
"F1",
]
algo_columns = ["Test-SVM+Naïve B", "RF"]
table_data = {
"AUC": [threshold * 0.8, threshold * 0.83],
"Accuracy": [threshold * 0.85, threshold * 0.86],
"Kappa": [threshold * 0.66, threshold * 0.69],
"Sensitivity (Recall)": [threshold * 0.82, threshold * 0.83],
"Specificity": [threshold * 0.78, threshold * 0.79],
"Precision": [threshold * 0.78, threshold * 0.79],
"F1": [threshold * 0.81, threshold * 0.82],
}
data = [i for i in table_data]
table = pd.DataFrame(
columns=algo_columns,
index=metrics_index,
data=[table_data[i] for i in metrics_index],
)
# display(table)
################################################################
######################## Body ################################
################################################################
body = dbc.Container(
[
dbc.Row(
[
dbc.Col(
[
html.H2("Slider + Manual entry test"),
dcc.Slider(
id="my-slider",
min=0,
max=1,
step=0.01,
marks={"0": "0", "0.5": "0.5", "1": "1"},
value=threshold,
),
html.Div(id="update-table"),
]
),
dbc.Col(
[
html.Div(
[
html.Div(
dcc.Input(
id="input-box",
max=0,
min=1,
step=0.01,
value=threshold,
)
),
html.Div(id="slider-output-container"),
]
)
]
),
]
)
]
)
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([body])
##############################################################
######################## callbacks ###########################
##############################################################
@app.callback(
dash.dependencies.Output("slider-output-container", "children"),
[dash.dependencies.Input("my-slider", "value")],
)
def update_output(value):
threshold = float(value)
return threshold
# call back for slider to update based on manual input
@app.callback(
dash.dependencies.Output(component_id="my-slider", component_property="value"),
[dash.dependencies.Input("input-box", "value")],
)
def update_output(value):
threshold = float(value)
return threshold
# call back to update table
@app.callback(
dash.dependencies.Output("update-table", "children"),
[dash.dependencies.Input("my-slider", "value")],
)
def update_output(value):
threshold = float(value)
table_data = pd.DataFrame.from_dict(
{
"AUC": [threshold * 0.8, threshold * 0.83],
"Accuracy": [threshold * 0.85, threshold * 0.86],
"Kappa": [threshold * 0.66, threshold * 0.69],
"Sensitivity (Recall)": [threshold * 0.82, threshold * 0.83],
"Specificity": [threshold * 0.78, threshold * 0.79],
"Precision": [threshold * 0.78, threshold * 0.79],
"F1": [threshold * 0.81, threshold * 0.82],
}
)
return html.Div(
[
dash_table.DataTable(
data=table_data.to_dict("rows"),
columns=[{"id": x, "name": x} for x in table_data.columns],
)
]
)
if __name__ == "__main__":
app.run_server(host="0.0.0.0", port=8050, debug=True, dev_tools_hot_reload=True)
我尝试了一下，似乎可以使用上面稍微修改过的代码来工作；我必须做出的改变是：
- 转换字典
table_data进入数据框（这允许.to_dict()方法，这是一个可以工作的 pd.DataFrame 方法！）
table_data = pd.DataFrame.from_dict(
{
"AUC": [threshold * 0.8, threshold * 0.83],
"Accuracy": [threshold * 0.85, threshold * 0.86],
"Kappa": [threshold * 0.66, threshold * 0.69],
"Sensitivity (Recall)": [threshold * 0.82, threshold * 0.83],
"Specificity": [threshold * 0.78, threshold * 0.79],
"Precision": [threshold * 0.78, threshold * 0.79],
"F1": [threshold * 0.81, threshold * 0.82],
}
)
-
Also in update_output回调函数：
- A. 将 df .to_dict 方法调用的“记录”更改为“行”
- B. 你有 table 而不是 table_data 作为列参数
- C. 删除使用
id这里是 Dash 参数，b/c 它已经在布局中了
return html.Div(
[
dash_table.DataTable(
data=table_data.to_dict("rows"),
columns=[{"id": x, "name": x} for x in table_data.columns],
)
]
)
- 看起来您已经切换了最大和最小！ （最大零不会留下很多可能的输入！[实际上，没有..]）；放置小数点和匹配精度也可能很重要，我添加这些是为了以防万一。
html.Div(
dcc.Input(
id="input-box",
max=1.00,
min=0.00,
step=0.01,
value=threshold,
type="number"
)
),
