๐Ÿ˜Ž ๊ณต๋ถ€ํ•˜๋Š” ์ง•์ง•์•ŒํŒŒ์นด๋Š” ์ฒ˜์Œ์ด์ง€?

HTML์—์„œ Python์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” PyScript (2) ๋ณธ๋ฌธ

๐Ÿ‘ฉ‍๐Ÿ’ป ๋ฐฑ์—”๋“œ(Back-End)/Node js

HTML์—์„œ Python์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” PyScript (2)

์ง•์ง•์•ŒํŒŒ์นด 2022. 11. 25. 10:55
728x90
๋ฐ˜์‘ํ˜•

<๋ณธ ๋ธ”๋กœ๊ทธ๋Š” itadventrue ๋‹˜์˜ ๋ธ”๋กœ๊ทธ๋ฅผ ์ฐธ๊ณ ํ•ด์„œ ๊ณต๋ถ€ํ•˜๋ฉฐ ์ž‘์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค :-)>

https://itadventure.tistory.com/543

 

ํŒŒ์ด์Šคํฌ๋ฆฝํŠธ ๋„์ „๊ธฐ(2) - ์ธ๊ตฌ๋ณ€ํ™” ๊ทธ๋ž˜ํ”„

์ง€๋‚œ ๊ฒŒ์‹œ๊ธ€์— ์ด์–ด ํŒŒ์ด์Šคํฌ๋ฆฝํŠธ 2๋ฒˆ์งธ ๋„์ „๊ธฐ์ž…๋‹ˆ๋‹ค. ์ง€๋‚œ ๊ฒŒ์‹œ๊ธ€ : https://itadventure.tistory.com/542 ํŒŒ์ด์Šคํฌ๋ฆฝํŠธ ๋„์ „๊ธฐ(1) ์›น๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž‘๋™ํ•˜๋Š” ์ƒˆ๋กœ์šด ์Šคํฌ๋ฆฝํŠธ๋ผ์„œ ๊ผญ ์‹œ๋„ํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋Š”

itadventure.tistory.com

 

 

๐ŸŽ„ ๋ชจ๋“ˆ ์‚ฌ์šฉ ์„ ์–ธ

 ํŒŒ์ด์ฌ ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์ด ์•„๋‹Œ ๋ชจ๋“  ๋ชจ๋“ˆ์€ py-env ํƒœ๊ทธ๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉํ•˜๊ฒ ๋‹ค๊ณ  ๋ชจ๋“ˆ๋ช…์„ ์‚ฌ์ „์— ๋ฏธ๋ฆฌ ์„ ์–ธ ํ•ด์•ผ ํ•จ

<html> 
    <head> 
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> 
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script> 
      <py-env>
        - matplotlib
      </py-env>
    </head>
  <body> 
  </body> 
</html>

 

 

 

๐ŸŽ„ ๊ทธ๋ž˜ํ”„ ๊ทธ๋ฆฌ๊ธฐ

โ— ์ฃผ์˜

  • ํŒŒ์ด์Šคํฌ๋ฆฝํŠธ์—์„œ ๊ทธ๋ž˜ํ”„๋Š” plt.show() ๋ช…๋ น์–ด๊ฐ€ ์•„๋‹ˆ๋ผ plt.figure() ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉ

 

โ— ์ˆœ์„œ

  • HTML ์†Œ์Šค ๋‚ด์—์„œ ๊ทธ๋ž˜ํ”„๋ฅผ ์ถœ๋ ฅํ•  div ๋ฅผ ํ•˜๋‚˜ ์„ ์–ธ
<div id="div์ด๋ฆ„"></div>
  • <py-script> ์˜ output ์†์„ฑ์„ ์ •์˜ํ•˜๊ณ  ์ถœ๋ ฅํ•  div ์ด๋ฆ„์„ ์ ๊ธฐ
<py-script output="poplulation_layer">
  • 3) <py-script> ์Šคํฌ๋ฆฝํŠธ ์•ˆ์ชฝ์„ ์ฑ„์›Œ ๋„ฃ๊ธฐ
  <py-script output="poplulation_layer"> 
      import matplotlib.pyplot as plt
      fig = plt.figure()
      year = [
        1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 
        2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013,
        2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021]
        ....

โ— ๊ทธ๋ž˜ํ”„ ์ฝ”๋“œ

<html> 
    <head> 
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> 
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script> 
      <py-env>
        - matplotlib
      </py-env>
    </head>
  <body> 
    <h1>๋Œ€ํ•œ๋ฏผ๊ตญ ์ธ๊ตฌ</h1>
    <div id="poplulation_layer"></div>
    <py-script output="poplulation_layer"> 
      import matplotlib.pyplot as plt
      fig = plt.figure()
      year = [
        1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 
        2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013,
        2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021]
        
      population = [
        45416339, 45858029, 46266256, 46684069, 46991171, 47335678, 47732558, 48021543, 48229948, 48386823,
        48583805, 48782274, 48991779, 49268928, 49540367, 49773145, 50515666, 50734284, 50948272, 51141463,
        51327916, 51529338, 51696216, 51778544, 51826059, 51849861, 51829023, 51638809 ]
      plt.plot(year, population, label='Korea' )
      fig
    </py-script> 
  </body> 
</html>

 

 

 

 

 

728x90
๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ

'๐Ÿ‘ฉโ€๐Ÿ’ป ๋ฐฑ์—”๋“œ(Back-End) > Node js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

HTML์—์„œ Python์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” PyScript (4)  (1) 2022.11.25
HTML์—์„œ Python์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” PyScript (3)  (0) 2022.11.25
HTML์—์„œ Python์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” PyScript (1)  (0) 2022.11.25
์›น์—์„œ ๊ทธ๋ž˜ํ”„ ๋งŒ๋“œ๋Š” Plot.js ์•Œ์•„๋ณด๊ธฐ  (0) 2022.11.22
์›น์—์„œ ๊ทธ๋ž˜ํ”„ ๋งŒ๋“œ๋Š” Google Chart API ์•Œ์•„๋ณด๊ธฐ  (0) 2022.11.21
'๐Ÿ‘ฉ‍๐Ÿ’ป ๋ฐฑ์—”๋“œ(Back-End)/Node js' Related Articles more
Comments