如何在 python（dash）仪表板中显示 png 文件和 csv 表

Posted 2023-03-22

【中文标题】如何在 python（dash）仪表板中显示 png 文件和 csv 表

【英文标题】：How to display png files and csv tables in a python (dash) dashboard

【发布时间】：2021-12-25 13:05:39

【问题描述】：

我对 plotly 和 dash 以及 UI 非常陌生。我使用 tweepy 从 twitter 收集了数据，并完成了分析并生成了一些 png。

我现在正在尝试构建仪表板。我有一个图像列表（png）和一个列表文件（csv）。 我想在仪表板中有一个按钮“图表”和下拉列表“数据”（基本上是 csv 文件）。

如果我点击“图表”，我想显示所有图像（大约 3 张），如果我选择一个文件，那么我只想在表格中显示前 100 行 csv。

有人可以为此建议一个骨架，因此我可以在它之上构建。我确实浏览了来自https://dash.plotly.com/dash-html-components/button 和其他按钮的一些示例，并尝试如下。

import dash
import dash_html_components as html
import dash_core_components as dcc
import base64

app = dash.Dash()

list_of_images = [
    "C:\\Users\\results\\sentiment_plot.png",
    "C:\\Users\\positive_wc.png",
    "C:\\Users\\negative_wc.png",
    "C:\\Users\\top_hashtag.png"
]

list_of_data = [
    "C:\\Users\\sentiment_by_location.csv",
    "C:\\Users\\geo_location_frequency.csv",
    "C:\\Users\\total_hashtag_frequency.csv",
]

app.layout = html.Div(children=[
    html.H1(children='Twitter analytics Report'),
    html.H2(children='''Image charts'''),
    dcc.Dropdown(
        id='image-dropdown',
        options=['label': i, 'value': i for i in list_of_images],
        # initially display the first entry in the list
        value = list_of_images[0],
    ),
    html.Img(id='image'),

    dcc.Dropdown(
        id='data-dropdown',
        options=['label': i, 'value': i for i in list_of_data],
        # initially display the first entry in the list
        value = list_of_data[0]
    ),
    html.Img(id='data')

])

@app.callback(
    dash.dependencies.Output('image', 'src'),
    [dash.dependencies.Input('image-dropdown', 'value')])
def update_image_src(image_path):
    # print the image_path to confirm the selection is as expected
    print('current image_path = '.format(image_path))
    encoded_image = base64.b64encode(open(image_path, 'rb').read())
    return 'data:image/png;base64,'.format(encoded_image.decode())

@app.callback(
    dash.dependencies.Output('data', 'src'),
    [dash.dependencies.Input('data-dropdown', 'value')])
def update_data_src(data_path):
    # print the image_path to confirm the selection is as expected
    print('current data_path = '.format(data_path))
    encoded_image = base64.b64encode(open(data_path, 'rb').read())
    return 'data:image/png;base64,'.format(encoded_image.decode())

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

上面的示例适用于 imgaes，但我仍然必须找到一种方法让所有图像以相同的大小显示。 CSV 我只有一个下拉列表。我还没有找到以表格形式显示 csv 数据的方法。

尝试上面的用例对我来说仍然是压倒性的。谢谢。

【参考方案1】：

我还尝试了另一个示例，如下所示。这也从不显示图像。

import dash
import dash_core_components as dcc
import dash_html_components as html
import base64

# Launch the application:
app = dash.Dash()

app.layout = html.Div([
    html.Button('Clear', id='btn-nclicks-1', n_clicks=0),
    html.Button('sentiment_plot', id='btn-nclicks-2', n_clicks=0),
    html.Button('top_hashtag', id='btn-nclicks-3', n_clicks=0),
    html.Button('positive_wc', id='btn-nclicks-4', n_clicks=0),
    html.Button('negative_wc', id='btn-nclicks-5', n_clicks=0),
    html.Div(id='container-button-timestamp')
])

@app.callback(
    dash.dependencies.Output('container-button-timestamp', 'children'),
    dash.dependencies.Input('btn-nclicks-1', 'n_clicks'),
    dash.dependencies.Input('btn-nclicks-2', 'n_clicks'),
    dash.dependencies.Input('btn-nclicks-3', 'n_clicks'),
    dash.dependencies.Input('btn-nclicks-4', 'n_clicks'),
    dash.dependencies.Input('btn-nclicks-5', 'n_clicks')
)
def displayClick(btn1, btn2, btn3, btn4, btn5):
    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
    if 'btndisplayClick-nclicks-1' in changed_id:
        ### HAVE TO CLEAR THE CANVAS
        msg = 'None was clicked'
    if 'btn-nclicks-2' in changed_id:
        #msg = 'sentiment_plot was most recently clicked'
        encoded_image = base64.b64encode(open("C:\\Users\\sentiment_plot.png", 'rb').read())
        msg = 'data:image/png;base64,'.format(encoded_image.decode())
    elif 'btn-nclicks-3' in changed_id:
        #msg = 'top_hashtag was most recently clicked'
        encoded_image = base64.b64encode(open("C:\\Users\\top_hashtag.png", 'rb').read())
        msg = 'data:image/png;base64,'.format(encoded_image.decode())
    elif 'btn-nclicks-4' in changed_id:
        #msg = 'positive_wc was most recently clicked'
        encoded_image = base64.b64encode(open("C:\\Users\\positive_wc.png", 'rb').read())
        msg = 'data:image/png;base64,'.format(encoded_image.decode())
    elif 'btn-nclicks-5' in changed_id:
        #msg = 'negative_wc was most recently clicked'
        encoded_image = base64.b64encode(open("C:\\Users\\negative_wc.png", 'rb').read())
        msg = 'data:image/png;base64,'.format(encoded_image.decode())
    else:
        msg = 'None of the buttons have been clicked yet'
    return html.Div(msg)

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