홈>
주피터가 노트북의 팬더 데이터 프레임에 사용하는 출력을 html/css/js로 복제하여 Flask
jsonify
에서 반환 할 수 있도록하려고합니다.
나중에 AJAX 호출에 사용하는 html로.
이 및 이, CSS 해킹 대신 팬더 내장 스타일 기능 사용을 제안했지만 원하는 기능을 얻는 데 어려움을 겪고 있습니다.
def hover(hover_color="#add8e6"):
return dict(selector="tr:hover",
props=[("background-color", "%s" % hover_color)])
styles = [
hover(),
dict(selector="th", props=[("font-size", "125%"),
("text-align", "center"),
("padding", "5px 5px")]),
dict(selector="tr", props=[("text-align", "center")]),
dict(selector="caption", props=[("caption-side", "bottom")])
]
# creating some dummy data
index = pd.MultiIndex(levels=[['bar', 'baz', 'foo', 'qux'], ['one', 'two']],
labels=[[0, 0, 1, 1, 2, 2, 3, 3], [0, 1, 0, 1, 0, 1, 0, 1]],
names=['first', 'second'])
df = pd.DataFrame(data=np.random.randn(8), index=index)
# you'll see the html rendered bellow
df.style.set_table_styles(styles).set_caption("test").render()
주피터 노트북과 비교할 때 일부 기본 배경색 제거가 누락되어 있으며 헤더에 호버 클래스를 적용하지 않아야합니다. 선택 요소에 무언가를 적용 할 수있는 유일한 방법은
class=
를 추가하는 것입니다.
또는
id=
그러나 스타일 기능은 모든 것을 숨 깁니다.
<style type="text/css" > #T_479b61ba_292a_11e8_86bf_0ee09a5428a2 tr:hover { background-color: #add8e6; } #T_479b61ba_292a_11e8_86bf_0ee09a5428a2 th { font-size: 150%; text-align: center; } #T_479b61ba_292a_11e8_86bf_0ee09a5428a2 caption { caption-side: bottom; }</style> <table id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2" ><caption>Hover to highlight.</caption> <thead> <tr> <th class="blank" ></th> <th class="blank level0" ></th> <th class="col_heading level0 col0" >0</th> </tr> <tr> <th class="index_name level0" >first</th> <th class="index_name level1" >second</th> <th class="blank" ></th> </tr></thead> <tbody> <tr> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level0_row0" class="row_heading level0 row0" rowspan=2>bar</th> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row0" class="row_heading level1 row0" >one</th> <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row0_col0" class="data row0 col0" >-0.0690895</td> </tr> <tr> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row1" class="row_heading level1 row1" >two</th> <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row1_col0" class="data row1 col0" >-0.518092</td> </tr> <tr> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level0_row2" class="row_heading level0 row2" rowspan=2>baz</th> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row2" class="row_heading level1 row2" >one</th> <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row2_col0" class="data row2 col0" >-0.163842</td> </tr> <tr> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row3" class="row_heading level1 row3" >two</th> <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row3_col0" class="data row3 col0" >-0.144757</td> </tr> <tr> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level0_row4" class="row_heading level0 row4" rowspan=2>foo</th> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row4" class="row_heading level1 row4" >one</th> <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row4_col0" class="data row4 col0" >1.22865</td> </tr> <tr> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row5" class="row_heading level1 row5" >two</th> <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row5_col0" class="data row5 col0" >1.83947</td> </tr> <tr> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level0_row6" class="row_heading level0 row6" rowspan=2>qux</th> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row6" class="row_heading level1 row6" >one</th> <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row6_col0" class="data row6 col0" >0.793328</td> </tr> <tr> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row7" class="row_heading level1 row7" >two</th> <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row7_col0" class="data row7 col0" >-0.723836</td> </tr></tbody> </table>
-
답변 # 1
관련 자료
- Python 3.9 - 파이썬 39 - jupyter :판다 :dataframe : 집계 후 열별로 누락 된 그룹
- python - Jupyter 노트북에서 뷰티 데이터 프레임 인쇄
- python - 팬더 데이터 프레임은 전체 열을 동일한 크기의 개체로 바꿉니다
- python - 팬더 데이터 프레임의 셀을 병합하여 헤더로 사용하는 방법은 무엇입니까?
- python - 벡터화가 불가능할 때 Pandas 데이터 프레임에서 반복을 최적화하는 방법
- python - Jupyter 노트북의 Tkinter 텍스트 위젯에서 텍스트를 얻는 방법은 무엇입니까?
- python - Pandas는 동일한 타임 스탬프에서 여러 거래의 데이터 프레임에서 결과 데이터 프레임을 계산합니다
- python - 두 개의 팬더 열을 첫 번째 열의 첫 번째 요소, 두 번째 열의 두 번째 요소 등을 사용하여 하나의 데이터 프레임으로 혼합하는 방법은 무엇입니까?
- python - 효율적으로 조건에 따라 Pandas 데이터 프레임에 새 행을 만듭니다
- python - 길이가 다른 튜플 목록의 사전에서 Pandas DataFrame 만들기
- python - 이전 열을 기반으로 pandas 데이터 프레임에서 NaN 셀을 채우는 방법은 무엇입니까?
- python - Pandas 데이터 프레임에서 각 고객에 대한 최신 데이터를 가져옵니다
- 터미널에서 특정 jupyter 노트북 열기
- python - ID로 Pandas 데이터 프레임에서 n 명의 사용자 가져 오기
- python - Pandas Dataframe은 값이 참인 한 그들을 그룹화합니다
- python - Pandas 데이터 프레임에서 문자열 편집
- 일부 행을 제외하고 Pandas 데이터 프레임 차이?
- Pandas DataFrame의 각 그룹에 kmeans를 적용하고 동일한 DataFrame의 새 열에 클러스터를 저장합니다
- python - Pandas DataFrame에서 최대가 발생한 연도 및 반환 날짜로 최대 찾기
- python - Pandas 데이터 프레임에 ID 열 만들기
관련 질문
- python - 데이터 프레임을 병합하고 값을 채우는 방법
- python - 'FTR'열의 'H'수를 어떻게 계산합니까?
- python - NaN 값을 조건에 따라 다른 Cols의 평균으로 대체
- python - Pandas DataFrame에서 최소값이 0이 아닌 첫 번째 행의 인덱스를 얻는 방법은 무엇입니까?
- python - 열이 단어 인 데이터 세트가 있습니다 동일한 열을 어떻게 추가 할 수 있습니까?
- python - Pandas 시리즈에서 선택적으로 문자열을 제거하는 방법은 무엇입니까?
- python - sklearn을 사용할 때 해결할 수없는 유형 오류가 표시됩니다
- python - Pandas와 JSON을 결합하는 방법
- python - LIVE API 호출을 panda 데이터 프레임으로 어떻게 바꿀 수 있습니까?
- python - txt 파일에 저장된 사전 목록을 데이터 프레임으로 변환
원하는 기능을 얻기 위해 코드를 약간 변경했습니다 :
Pandas 데이터 프레임은 테이블에 대한 두 개의 특수 HTML 태그, 즉
thead
로 스타일이 지정됩니다. 헤더와tbody
몸을 위해. 이를 사용하여 강조 표시 동작을 본문 전용으로 지정할 수 있습니다CSS에는 테이블에 음영 효과를 추가하는 데 사용할 수있는 "even"및 "odd"속성이 있습니다.
호버가 지정된 배경 음영으로 작업하려면 맨 처음이 아니라 마지막으로 호출되어야합니다.
주피터 노트 :
...하지만 HTML 파일을 출력 할 때 여전히 아름답습니까? 예. CSS 스타일링을 더 올바르게 수행하여 글꼴 크기, 글꼴 모음, 텍스트 장식, 여백/패딩 등을 시작할 수 있지만 시작하면됩니다. 아래를 참조하십시오 :