Flask下拉选择医院后动态展示Plotly表格的实现方案咨询

整体逻辑是：后端新增接口用于按医院名称返回对应表格数据，前端移除初始加载渲染逻辑，改为监听下拉框选择事件动态请求数据并渲染。

1. 修改Flask后端代码 #

先调整原有路由，新增数据查询接口：

from flask import Flask, render_template, request, jsonify
import dash_backend

app = Flask(__name__)

@app.route('/', methods=['GET'])
def index():
    # 初始只返回医院列表即可，不需要返回全量表格数据
    hosp_list = dash_backend.hosp_list
    return render_template('index.html', hospitals=hosp_list)

# 新增按医院查询数据的接口
@app.route('/get_hospital_data', methods=['POST'])
def get_hospital_data():
    # 接收前端传递的医院名称
    selected_hospital = request.json.get('hospital')
    # 这里根据你实际的dash_backend逻辑，过滤出对应医院的两个表格数据
    # 以下过滤逻辑根据你实际数据结构调整即可
    def filter_by_hospital(data, hospital):
        filtered = data.copy()
        # 假设data里的data数组下存储表格内容且包含hospital列，此处替换为你实际的过滤规则
        filtered['data'] = [item for item in data['data'] if item['hospital'] == hospital]
        return filtered
    tablejson = filter_by_hospital(dash_backend.admin_diagJson, selected_hospital)
    tablejson1 = filter_by_hospital(dash_backend.disch_diagJson, selected_hospital)
    return jsonify({
        'tableJSON': tablejson,
        'tableJSON1': tablejson1
    })

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

注意：上述代码中的过滤逻辑需要根据你实际的Plotly数据结构调整，保证只返回选中医院对应的数据即可。

2. 修改index.html前端代码 #

移除初始渲染逻辑，添加下拉框事件监听：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Dashboard </title>
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <!--医院选择列表-->
    <div class="dropdown">
        <label for="hospitalSelect">选择医院 :</label>
        <br>
        <!-- 给下拉框加id，添加默认空选项 -->
        <select id="hospitalSelect" class="form-select form-select-lg mb-3" name="hospital" style="width:240px">
            <option value="" selected>请选择医院</option>
            {% for hospital in hospitals %}
            <option value="{{hospital}}">{{hospital}}</option>
            {%endfor%}
        </select>
    </div>
    <!--表格容器开始-->
    <div class="row">
        <!-- 表格1 开始-->
        <div class="col col-md-6">
            <div id="chart"></div>
        </div>
        <!-- 表格1 结束-->
        <!--表格2开始-->
        <div class="col col-md-6">
            <div id="tal"></div>
        </div>
        <!--表格结束-->
    </div>
    <script>
        // 监听下拉框选择事件
        document.getElementById('hospitalSelect').addEventListener('change', function() {
            const selectedHospital = this.value;
            // 未选择医院时清空图表
            if (!selectedHospital) {
                Plotly.purge('chart');
                Plotly.purge('tal');
                return;
            }
            // 发送请求获取对应医院数据
            fetch('/get_hospital_data', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({hospital: selectedHospital})
            })
            .then(res => res.json())
            .then(data => {
                // 渲染两个图表
                Plotly.newPlot('chart', data.tableJSON1, {});
                Plotly.newPlot('tal', data.tableJSON, {});
            })
            .catch(err => console.error('请求数据失败:', err));
        });
    </script>
</body>
</html>

效果说明 #

• 页面首次加载时，下拉框默认显示「请选择医院」，两个图表区域完全空白
• 用户选择任意医院后，会自动请求后端数据并渲染对应医院的表格
• 用户重新切换到「请选择医院」选项时，图表会清空回到空白状态

内容的提问来源于stack exchange，提问作者LivingstoneM