我想使用 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,requestimport pandas as pdapp = 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 為紅色。任何熟悉這方面的人都可以幫助我。我是新的
1 回答
qq_笑_17
TA貢獻1818條經驗 獲得超7個贊
試試下面這個：
在你的 app.py 中：
from flask import Flask, render_template,request
import pandas as pd
app = 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>
- 1 回答
- 0 關注
- 196 瀏覽
添加回答
舉報
0/150
提交
取消