У меня есть следующий код Python для рендеринга HTML-кода для кадра данных панды:
TIME_FRAMES = ["24h", "7d", "30d", "200d", "1y"]
# Set CSS properties for th elements in dataframe
th_props = [
('font-size', '11px'),
('text-align', 'center'),
('font-weight', 'bold'),
('color', '#6d6d6d'),
('background-color', '#f7f7f9')
]
# Set CSS properties for td elements in dataframe
td_props = [
('font-size', '11px')
]
# Set table styles
styles = [
dict(selector="th", props=th_props),
dict(selector="td", props=td_props)
]
results = (df.style.bar(subset=TIME_FRAMES, align='zero', color=['#d65f5f', '#5fba7d'])
.set_table_attributes('border="1" class="dataframe table table-hover table-bordered"')
.format({t: "{:,.2f}" for t in TIME_FRAMES})
.format({"Market Cap (Millions)": "{:,.2f}"})
.hide_index()
.set_table_styles(styles))
из которого я получаю следующее:
Теперь я пытаюсь преобразовать эту таблицу в js DataTable, чтобы сделать ее более интерактивной и более привлекательной. Я использую flask только для проверки. Это мой app.py:
from flask import Flask, render_template
import pandas as pd
# Initialize the Flask application
app = Flask(__name__)
@app.route('/')
def index():
df= pd.read_pickle("df")
return render_template("index.html",
data=df.to_html(table_id="example",
float_format="%.2f",
na_rep="*",
classes="display cell-border nowrap compact",
border=0,
index=False))
if __name__ == '__main__':
app.run(debug=True)
А это index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
</div>
{% block content %}
<div>
{{data | safe}}
</div>
{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Blfrtip',
iDisplayLength: 100,
lengthMenu: [[50,100, -1], [50,100, "All"]],
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
],
columnDefs: [
{
targets: "_all",
className: 'dt-center'
}
]
} );
} );
</script>
</body>
</html>
Отсюда я получаю эту таблицу:
Как мне теперь добавить процентные столбцы, аналогичные тем, которые я получаю, когда генерирую HTML-код напрямую, используя df.style.bar()? Я знаю, что в DataTables есть плагин percentageBars (https://datatables.net/plug-ins/dataRender/percentageBars),, который я уже пробовал. Хотя он не подходит для моей конкретной цели, поскольку он просто отображает все, что больше 100%, как 100%, и я хочу, чтобы столбцы были пропорциональны друг другу, даже если проценты проходят 100%, как я получаю с df.style.bar(). Более того, percentageBars не различает положительные и отрицательные проценты, и мне это тоже нужно.