将pandas数据框渲染为html后，最终html表中的列丢失 [英] Missing columns in final html table after rendering the pandas dataframe to html
问题描述
我正在将以下df值写入html模板.我在最终的输出html表中缺少化学和代数专栏.
I am writing the below df values into a html template. I am missing chemistry and algebra column in the final output html table.
import pandas as pd
df = pd.DataFrame({'name': ['Somu', 'Kiku', 'Amol', 'Lini'],
'physics': [68, 74, 77, 78],
'chemistry': [84, 56, 73, 69],
'algebra': [78, 88, 82, 87]})
df_html = df.to_html()
template_vars = { "html_table":df_html}
f = open(output.html, 'w', encoding='utf-8')
html_template ="metrics.html"
temp = Template(open(html_template, 'r').read())
template = temp.render(template_vars)
f.write(template)
f.close()
在下面的Metrics.html中有4个按钮，其中第2个按钮未显示所有列.
In the below Metrics.html has 4 buttons, out of which 2nd button is not showing up all the columns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href =" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
#incorrect-response-panel .panel{
border-radius: 0;
}
.response-panel-title {
font-weight: normal;
}
.doc-info h3 {
font-weight: normal;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<button id=button1 type="button" class="collapsible">Top 1 Correct answer </button>
<div class="content">
{{correct_tab1}}
</div>
<div>
</br> </br>
</div>
<button id=button2 type="button" class="collapsible">Top 1 Incorrect answer </button>
<div class="content">
{{html_table}}
</div>
<div>
</br> </br>
</div>
<button id=button3 type="button" class="collapsible">Top 1 Correct answer </button>
<div class="content">
{{correct_tab1}}
</div>
<div>
</br> </br>
</div>
<button id=button4 type="button" class="collapsible">Top 1 Incorrect answer </button>
<div class="content">
{{incorrect_tab1}}
</div>
<div>
</br> </br>
</div>
https://codepen.io/code_rev/pen/VwKBpRY
推荐答案
在移动() in ( df =)和(`df_html =)的部分代码后，我对代码进行了部分测试:
As I testing your code partly after romoving () in (df=) and (`df_html=) in your qustion:
import pandas as pd
df = pd.DataFrame({'name': ['Somu', 'Kiku', 'Amol', 'Lini'],
'physics': [68, 74, 77, 78],
'chemistry': [84, 56, 73, 69],
'algebra': [78, 88, 82, 87]})
df_html = df.to_html()
我们发现df_html的内容是(只是重新格式化):
we find the content of df_html is (just reformating):
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th>name</th>
<th>physics</th>
<th>chemistry</th>
<th>algebra</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<td>Somu</td>
<td>68</td>
<td>84</td>
<td>78</td>
</tr>
<tr>
<th>1</th>
<td>Kiku</td>
<td>74</td>
<td>56</td>
<td>88</td>
</tr>
<tr>
<th>2</th>
<td>Amol</td>
<td>77</td>
<td>73</td>
<td>82</td>
</tr>
<tr>
<th>3</th>
<td>Lini</td>
<td>78</td>
<td>69</td>
<td>87</td>
</tr>
</tbody>
</table>
所以我们找到了包含所有列的完整DataFrame.
so we find the complete DataFrame with all the columns.
因此，这部分代码是正确的(在删除了我上面提到的字符(`)之后).
Hence, this part of the code is correct (after removing the character (`) I mentioned above).
在我看来，唯一可疑的句子是
The only suspicious sentence, in my thought, is
template = temp.render(template_vars)
在html_template ="metrics.html"和template_vars = { "html_table":df_html}
因此，如果仍然存在问题，则有必要添加'metrics.html`.我们可能会找到一些东西.
Therefore, if there is a problem still existed, it would be necessary to add 'metrics.html`. we may find something.
扩展 在您上传的"metrics.html"中，我更改了以下部分:
Extending In the 'metrics.html` you uploaded, I have changed the following part:
<button id=correct1 type="button" class="collapsible">Correct answer </button>
<div class="content">
{{correct_tab1}}
</div>
<div>
</br> </br>
</div>
<button id=incorrect1 type="button"
到
<button id=correct1 type="button" class="collapsible">Correct answer </button>
<div class="content">
{{html_table}} <!-- to match your question -->
</div>
<div>
</br> </br>
</div>
然后，在运行代码之后，output.html中与我们想要的表相关的渲染部分为:
then after running your code, the rendered part in output.html related to the table we intend is:
<button id=incorrect1 type="button" class="collapsible"> Incorrect answer </button>
<div class="content">
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th>name</th>
<th>physics</th>
<th>chemistry</th>
<th>algebra</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<td>Somu</td>
<td>68</td>
<td>84</td>
<td>78</td>
</tr>
<tr>
<th>1</th>
<td>Kiku</td>
<td>74</td>
<td>56</td>
<td>88</td>
</tr>
<tr>
<th>2</th>
<td>Amol</td>
<td>77</td>
<td>73</td>
<td>82</td>
</tr>
<tr>
<th>3</th>
<td>Lini</td>
<td>78</td>
<td>69</td>
<td>87</td>
</tr>
</tbody>
</table>
</div>
<div>
</br> </br>
</div>
所以我们注意到{{html_table}}我们正确地替换了包含所有列的表的HTML代码.
so we notice that {{html_table}} we replaced correctly with HTML code of the table including all the columns.
所以我没发现任何问题.
so I do not find any problem.
我想，您可能会研究output.html的旧版本，并且生成的版本位于另一个文件夹中.
I guess, you may investigate an old version of output.html and the generated one is in another folder.
，或者很明显，您没有上传要使用的'metrics.html`，因为上传的其中不包含您在问题中添加的HTML
这篇关于将pandas数据框渲染为html后，最终html表中的列丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
