Создать выпадающий список выбора для отображения данных - PullRequest
Новая
       4

Создать выпадающий список выбора для отображения данных

0 голосов
/ 15 апреля 2020

У меня есть данные, которые я хочу отображать в виде строк в другом коде цвета, используя flask framework. Вот как выглядят мои данные 

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

Теперь я хочу создать выпадающий список, который выбирает больницу и другой, который выбирает источник документов, а затем отображает количество документов на источник документа.

Вот как мое flask приложение выглядит как 

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 lang="en">
<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 - синим, а БЕСПЛАТНЫЙ ТЕКСТ - красным. Любой, кто знаком с этим, чтобы помочь мне. Я новенький

1 Ответ

1 голос
/ 15 апреля 2020

Попробуйте это ниже:

В вашем 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 lang="en">
<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>
...