web-dev-qa-db-ja.com

プロット化ダッシュテーブルコールバック

私はスライダー、ユーザー入力とテーブルの間の依存関係を取得しようとしています。データを出力し、コールバックを使用して更新しました。私はコールバックでテーブルを作成し、「div」を使用するだけで勧められました。ディスプレイ内の位置を定義するには。

他の情報：

  • tableは、dash_tableライブラリを使用して、pandasデータフレームから作成されます。
  • データは辞書形式です。
  • 変数thresholdがユーザー入力（スライダまたは入力）によって調整された値です。

誰かが私がテーブルが表示されていない理由を見つけるのを助けることができるならば、私は感謝するでしょうか？

これが私のコードです：

_
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
from dash.dependencies import Input, Output
import dash_table

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', type='float', 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 = {"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 dash_table.DataTable(
                            id='update-table',
                            data= table_data.to_dict('records'),
                            columns=[{'id': x, 'name': x} for x in table.columns]
                )


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

_
pythoncallbackplotly-dash
4
sam c

[テーブルライブ動的編集のスクリーンショット]

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)

私はこれを試してみましたが、上記のわずかに変更されたコードがわかりやすいようです。私が作らなければならなかった変化は次のとおりです。

  1. DICT table_dataをデータフレームに変換する（これにより、PD.DataFrameメソッドである.to_dict()メソッドが機能します。）
    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],
        }
    )

  1. update_outputコールバックFXNでも：

    • A. DF .TO_DICTメソッド呼び出しの場合は 'ROWS'を 'ROWS'に変更してください。
    • B.列PARAMのTABLE_DATAの代わりにテーブルを持っていました
    • C. idダッシュパラメータの使用を取り除く、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],
            )
        ]
    )
  1. あなたが最大と最小の切り替えがあるように見えます！ （最大ゼロは可能な入力をたくさんの入力を残しません！[実際には、なし）;また、私が念のために追加する小数とマッチング精度を置くことが重要かもしれません。
                                html.Div(
                                    dcc.Input(
                                        id="input-box",
                                        max=1.00,
                                        min=0.00,
                                        step=0.01,
                                        value=threshold,
                                        type="number"
                                    )
                                ),
2
John Collins