[파이썬] Flask에서의 차트 및 그래프 생성

06 Sep 2023

flask

Flask는 파이썬으로 웹 애플리케이션을 개발하기 위한 경량 프레임워크입니다. Flask를 사용하면 쉽고 빠르게 웹 애플리케이션을 구축할 수 있습니다. 이번 포스트에서는 Flask를 사용하여 차트 및 그래프를 생성하는 방법에 대해 알아보겠습니다.

1. Flask와 Chart.js

차트 및 그래프를 생성하기 위해 Flask와 함께 Chart.js를 사용할 수 있습니다. Chart.js는 HTML5 캔버스 요소를 사용하여 다양한 종류의 차트 및 그래프를 생성하는 JavaScript 라이브러리입니다. Flask와 Chart.js를 함께 사용하면 서버 측에서 데이터를 처리하고 클라이언트 측에서 시각적으로 표현하는 기능을 구현할 수 있습니다.

2. Flask와 Chart.js를 사용한 예제

아래는 Flask와 Chart.js를 사용하여 웹 페이지에 막대 차트를 생성하는 예제입니다.

먼저, Flask 애플리케이션을 생성하고 필요한 라우트를 정의합니다.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    data = [10, 20, 30, 40, 50] # 차트에 표시할 데이터
    labels = ['A', 'B', 'C', 'D', 'E'] # 데이터에 해당하는 라벨

    return render_template('index.html', data=data, labels=labels)

다음으로 index.html 템플릿 파일을 생성하고 Chart.js 스크립트를 포함시킵니다.

<!DOCTYPE html>
<html>
<head>
    <title>차트 예제</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- Chart.js 스크립트 -->
</head>
<body>
    <canvas id="chart"></canvas> <!-- 차트를 표시할 캔버스 요소 -->

    <script>
        // Flask에서 넘겨받은 데이터와 라벨을 가져옴
        var data = {{ data }};
        var labels = {{ labels }};

        // Chart.js를 사용해서 차트를 생성함
        var ctx = document.getElementById('chart').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: '데이터',
                    data: data,
                    backgroundColor: 'rgba(0, 123, 255, 0.5)'
                }]
            },
            options: {
                responsive: true
            }
        });
    </script>
</body>
</html>

위 예제에서는 / 라우트로 접속하면 차트가 표시되도록 구현하였습니다. Flask 애플리케이션을 실행하고 웹 브라우저에서 http://localhost:5000에 접속하면 막대 차트가 표시될 것입니다.

3. 추가적인 차트 및 그래프 생성 방법

Flask와 Chart.js를 사용하여 다양한 종류의 차트 및 그래프를 생성할 수 있습니다. Chart.js는 막대 차트 외에도 라인 차트, 원형 차트 등을 제공합니다. Flask와 Chart.js의 공식 문서를 참고하여 필요한 차트 및 그래프를 구현해보세요.

마무리

이번 포스트에서는 Flask와 Chart.js를 사용하여 차트 및 그래프를 생성하는 방법에 대해 알아보았습니다. Flask와 Chart.js는 간편하게 웹 애플리케이션에 시각화 기능을 추가할 수 있는 강력한 도구입니다. 다음에는 조금 더 복잡한 예제와 실제 데이터를 사용하여 차트 및 그래프를 생성하는 방법에 대해 살펴보도록 하겠습니다.

Happy coding!