HTML에서 Python을 사용할 수 있는 PyScript (7)

250x250

관리 메뉴

😎 공부하는 징징알파카는 처음이지?

HTML에서 Python을 사용할 수 있는 PyScript (7) 본문

👩‍💻 백엔드(Back-End)/Node js

HTML에서 Python을 사용할 수 있는 PyScript (7)

징징알파카 2022. 11. 25. 15:12

728x90

<본 블로그는 itadventrue 님의 블로그를 참고해서 공부하며 작성하였습니다 :-)>

https://itadventure.tistory.com/549]

파도!(8) - 아보카도 판매량

지난 게시글에 연재되는 글입니다 - https://itadventure.tistory.com/548 파이스크립트 도전기(7) - 한글 그래프! 지난 게시글에 이어지는 연재글입니다 : https://itadventure.tistory.com/547 파이스크립트 도전기(6

itadventure.tistory.com

🎄 외부 csv 데이터 불러오기

❗ css 스타일 소스 <pytable.css>

table.dataframe th {
  background-color: #EA6153 !important;
  color: white !important;
  text-align:center !important;
  padding: 5px 15px;
  font-size:9pt !important;
}

table.dataframe td {
  color: black !important;
  text-align:center !important;
  padding: 5px 15px;
  font-size:9pt !important;
}

table.dataframe tr {
    background-color: #FFFFFF !important;
}

table.dataframe tr:nth-child(odd) {
    background-color: #E9E9E9 !important;
}

❗ HTML 소스와 파이 스크립트 <index.html>

<html> 
    <head> 
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> 
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script> 
      <py-env>
        - pandas
        - matplotlib
      </py-env>
    </head>
  <body> 
    <link rel="stylesheet" href="pytable.css"/>
    <py-script>
      <!-- 표를 HTML 화면에 추가하는 부분을 파이썬 함수로 단순화 -->
      def createElementDiv(name):
          element = document.createElement('div')
          element.id = name
          document.body.append(element)
          return Element(name)
          
      import pandas as pd
      from pyodide.http import open_url
      
      # 판다스에서 csv 를 데이터 프레임으로 읽어옴
      df = pd.read_csv(open_url("http://dreamplan7.cafe24.com/pyscript/csv/avocado.csv"))
      
      createElementDiv('output1').write(df)      
    </py-script> 
  </body> 
</html>

- Date : 판매 날짜
- AveragePrice : 평균 판매 가격
- Total Volumn : 총 판매량

🎄 세부 항목 고치기 ( 달 추가, 월별 매출량 )

<html> 
    <head> 
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> 
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script> 
      <py-env>
        - pandas
        - matplotlib
      </py-env>
    </head>
  <body> 
    <link rel="stylesheet" href="pytable.css"/>
    <py-script>
      <!-- 표를 HTML 화면에 추가하는 부분을 파이썬 함수로 단순화 -->
      def createElementDiv(name):
          element = document.createElement('div')
          element.id = name
          document.body.append(element)
          return Element(name)
          
      import pandas as pd
      from pyodide.http import open_url
      
      # 판다스에서 csv 를 데이터 프레임으로 읽어옴
      df = pd.read_csv(open_url("http://dreamplan7.cafe24.com/pyscript/csv/avocado.csv"))
      
      df.insert(2, 'month', df['Date'].str[:7], True)
      
      createElementDiv('output1').write(df)
      
      # 월별 매출량 조사
      df_group = df.fillna(0).groupby('month')[['Total Volume']].sum().sort_values(by='month', ascending=True)
      
      createElementDiv('output1').write(df_group)      
    </py-script> 
  </body> 
</html>

❗ 월별 매출을 구하기 위해서는 표에 월을 추가

df.insert(2, 'month', df['Date'].str[:7], True)

❗ 월별 매출량 -> 월별로 그룹을 지은 다음, 그 합계

# 월별 매출량 조사
df_group = df.fillna(0).groupby('month')[['Total Volume']].sum().sort_values(by='month', ascending=True)

728x90

저작자표시

'👩‍💻 백엔드(Back-End) > Node js' 카테고리의 다른 글

HTML에서 Python을 사용할 수 있는 PyScript (9) (1)	2022.11.25
HTML에서 Python을 사용할 수 있는 PyScript (8) (0)	2022.11.25
HTML에서 Python을 사용할 수 있는 PyScript (6) (0)	2022.11.25
HTML에서 Python을 사용할 수 있는 PyScript (5) (0)	2022.11.25
HTML에서 Python을 사용할 수 있는 PyScript (4) (1)	2022.11.25

'👩‍💻 백엔드(Back-End)/Node js' Related Articles

Comments

😎 공부하는 징징알파카는 처음이지?

HTML에서 Python을 사용할 수 있는 PyScript (7) 본문

HTML에서 Python을 사용할 수 있는 PyScript (7)

🎄 외부 csv 데이터 불러오기

🎄 세부 항목 고치기 ( 달 추가, 월별 매출량 )

'👩‍💻 백엔드(Back-End) > Node js' 카테고리의 다른 글

티스토리툴바