创建用于显示数据的下拉选择框
我想使用 Flask 框架将数据显示为不同颜色代码中的字符串。这是我的数据的样子
df = pd.DataFrame({'Hospital': ['Nick hospital', 'Nick hospital', 'Nick hospital',
'Krish hospital', 'Krish hospital', 'Krish hospital'],
'Document source':['Nar', 'PAR', 'Free Text', 'Nar', 'PAR', 'Free Text'],
'Document_count': [1200, 150, 3, 2500, 342, 300]})
df
现在我想创建一个选择医院的下拉列表，另一个选择文档源的下拉列表，然后显示每个文档源的文档计数。
这是我的烧瓶应用程序的样子
from flask import Flask, render_template,request
import pandas as pd
app = Flask(__name__)
@app.route('/')
def index():
temp= df.doc_counts().to_dict('records')
columnNames = df.doc_counts().columns.values
return render_template('index.html', records = temp, colnames=columnNames)
if __name__ =='__main__':
app.run()
这是我的 html，它只显示整个表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="table">
<h6> 'Document source counts</h6>
<table border="1">
<thead>
<tr>
{% for col in colnames %}
<th>{{ col }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for record in records %}
<tr>
{% for col in colnames %}
<td>{{ record[col] }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</body>
</html>
我的最终结果应该是两个下拉选择列表，一个是我选择医院，另一个是我选择文档源，然后得到文档计数，例如 NAR 为绿色，PAR 为蓝色，FREE TEXT 为红色。任何熟悉这方面的人都可以帮助我。我是新的
慕妹32420031回答
-
qq_笑_17
试试下面这个：在你的 app.py 中：from flask import Flask, render_template,requestimport pandas as pdapp = Flask(__name__)@app.route('/')def index(): import pandas as pd df = pd.DataFrame({'Hospital': ['Nick hospital', 'Nick hospital', 'Nick hospital', 'Krish hospital', 'Krish hospital', 'Krish hospital'], 'Document_source': ['Nar', 'PAR', 'Free Text', 'Nar', 'PAR', 'Free Text'], 'Document_count': [1200, 150, 3, 2500, 342, 300]}) temp = df.to_dict('list') temp_records = df.to_dict('records') columnNames = df.columns.values temp['Hospital'] = list(set(temp['Hospital'])) temp['Document_source'] = list(set(temp['Document_source'])) return render_template("test.html", records=temp_records, temp_records=temp, columnNames=columnNames)if __name__ =='__main__': app.run()在你的html中：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Example</title></head><body><div id="table"> <h6> 'Document source counts</h6> <table border="1"> <thead> <tr> {% for col in columnNames %} <th>{{ col }}</th> {% endfor %} </tr> </thead> <tbody> {% for record in records %} <tr> {% for col in columnNames %} <td> {{ record[col] }}</td> {% endfor %} </tr> {% endfor %} </tbody></table></div><br>{% set hospitals = temp_records['Hospital'] %}{% set document_source = temp_records['Document_source'] %}{% set document_count = temp_records['Document_count'] %}<label for="hospitals">Choose a Hospital:</label><select id="hospitals"><option value="default">Select Hospital</option> {% for i in hospitals %} <option value="{{ i }}">{{ i }}</option> {% endfor %}</select><label style="margin-left: 10px" for="document_count">Choose a Document Source:</label><select id="document_source"><option value="default">Select Document Source</option> {% for i in document_source %}<option value="{{i}}">{{i}}</option> {% endfor %}</select><button style="margin-left: 10px" type="button" onclick="getCount()">Get Count</button><div id="document_count"></div></body><script type="text/javascript"> var records = {{ records|safe }} // --------- Take the records from the jinja and store it to a variable function getCount() { var hospital = document.getElementById("hospitals"); var data_hospital = hospital.options[hospital.selectedIndex].value; // -----> Here we get the id of the hospital dropdown and extract its value. var document_source = document.getElementById("document_source"); var data_source = document_source.options[document_source.selectedIndex].value; // ------> Here we get the id of the document source dropdown and extract its value.// 检查两个下拉列表的值是否不为空或者没有选择默认值。 if((data_hospital!='default' || data_hospital!='') && (data_source!='default' || data_source!='')){// 这里映射记录数组并提取值为所选医院和文档源的项目的计数并返回其相应的计数。 records.map(function (item) { if(item.Hospital == data_hospital && item.Document_source == data_source){ var count = document.getElementById('document_count'); count.innerHTML = "<p>" + item.Document_count + "</p>" if(item.Document_source == 'Nar'){ count.style.color = 'green'; }else if(item.Document_source == 'PAR'){ count.style.color = 'blue'; }else{ count.style.color = 'red'; } } }) } }</script></html>
随时随地看视频慕课网APP
相关分类
Html5