0. Flask로 그린 그래프를 html로 표현하기

---

git : https://github.com/dothouse/practice/tree/master/project1/web
Tool : python / python-flask / html /javascript / css

✅사용 파일

D:\song\practice\project1\web\jeju\views\weather_views.py
https://github.com/dothouse/project1/blob/master/web/jeju/views/weather_views.py

D:\song\practice\project1\web\jeju\templates\select\select3.html
https://github.com/dothouse/project1/blob/master/web/jeju/templates/weather/base.html

---

1. 그래프 그리기

1) 준비

## 그림을 위한 패키지
from io import BytesIO, StringIO
import base64

import matplotlib
matplotlib.use('Agg')
import matplotlib.pyplot as plt

matplotlib.rcParams['font.family'] = 'Malgun Gothic'
matplotlib.rcParams['axes.unicode_minus'] = False

2) Flask를 통해서 그래프 그리기

1. matplotlib을 통해서 그래프를 그리고
2. 그래프를 BytesIO()를 통해서 byte형태로 변환
3. 그려진 데이터를 html로 전송
4. html에서 받은 데이터를 그래프로 전환

@bp.route('/weather/<point>', methods=('GET', 'POST'))
def weather_fig(point):

### 중략

    # 추출된 데이터를 토대로 matplotlib을 통해서 그래프화
    df_graph = df_weather[df_weather['date'] > '2022-12-31']
    plt.figure(figsize=(10, 5))
    plt.title(f"{point} 관측소 정보", fontsize=15)
    plt.plot(df_graph["date"], df_graph["temperature"], "-", color='orange', label=str(point))
    plt.grid()
    plt.legend(fontsize=13)
    plt.xticks(rotation=45)

    # 그래진 그래프를 텍스트 형태로 저장하여 decode
    img = BytesIO()
    plt.savefig(img, format='png', dpi=200)
    img.seek(0)
    img_str = base64.b64encode(img.read()).decode('utf-8')

    return render_template("weather/show_weather.html", img_data=img_str)
  

✅ 그래프를 img에 담아서 byte형태로 저장 img_str
✅ img_str을 img_data로 html로 전송

3) html로 구현

<img src="data:image/jpeg;base64,{{ img_data }}" alt="Image Placeholder">

✅ html img태그 활용
✅ src 부분에 src="data:image/jpeg;base64,{{ img_data }} 형태로 입력