时间戳

首页 > 解决方案 > 如何在类似于 pandas style.bar 的 DataTable 中放置百分比条

javascript - 如何在类似于 pandas style.bar 的 DataTable 中放置百分比条

问题描述

我有以下 Python 代码来呈现 pandas DataFrame 的 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))

我从中得到以下信息：

使用 df.style.bar 获得的表格

现在我正在尝试将此表转换为 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不区分正百分比和负百分比，我也需要。

标签： javascriptpythonpandasdatatable

解决方案

推荐阅读