chart.js 사용할 때 주의할 점(feat. Flask)

ykd 8월 11, 2021
Photo by Uta Scholl on Unsplash


Flask와 chart.js를 이용해서 차트를 만드는 방법과 주의할 점을 정리했다. 


서버 코드 작성

먼저 요청을 받으면 차트로 표현할 데이터를 조회해서 응답으로 돌려주는 프로그램을 작성한다. 

1
2
3
4
5
6
7
8
@bp.route('/chart_view/')
def view():
    # 데이터 조회 영역 생략
    for row in data:
        labels.append(row['yyyymm'])
        value1.append(row['value1'])
        value2.append(row['value2'])
    return render_template('chart/chart.html', labels=labels, value1=value1, value2=value2)

각 변수에는 아래처럼 값이 할당된다고 하자.
labels = ['202101', '202102', '202103', '202104', '202105', '202106']
value1 = [1, 2, 3, 4, 5, 6]
value2 = [6, 5, 4, 3, 2, 1]


클라이언트 코드 작성

이제 HTML 페이지에서 차트를 그려주는 코드를 작성한다. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- JQuery JS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js'></script>
<!-- chart.js -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>

<script>
$(document).ready(function(){
chart = new Chart(document.getElementById("myChart"), {
            type: 'line',
                data: {
                    labels: {{ labels|safe }},
                    datasets: [
                        {
                            label: 'value1",
                            data: {{ value1 }},                        
                        },
                        {
                            label: 'value2",
                            data: {{ value2 }},
                        }
                    ],
                    borderWidth: 1
                },
            });
</script>

<canvas id="myChart"></canvas>

이 때 주의할 점이 2가지 있다. 


먼저 클라이언트에서 모든 HTML 코드를 로드한 이후에 차트를 작성하도록 해야 한다. 이 때 사용하는 코드가 

$(document).ready(function(){

이다. 이렇게 조치를 하지 않으면 웹브라우저는 코드를 순차 실행하기 때문에 차트를 그릴 canvas를 찾지 못한다. 


두번째로는 파이썬에서 문자열이 포함된 배열을 받게 되는 경우, 별도로 처리를 하지 않으면 클라이언트에는 아래와 같은 형태가 된다. 

&#39;202101&#39;

이는 브라우저가 HTML에서 특별한 의미를 담고 있는 문자(&, >, <, ", ')를 자동으로 변환하기 때문이다. 이런 경우 세가지 해결책이 있다. 

  1. Python 코드에서는, HTML 문자열을 Markup 객체를 통해서 템플릿에 전달되기 전에 래핑한다. 이방법은 일반적으로 권장되는 방법이다.
  2. 템플릿 내부에, |safe 필터를 명시적으로 사용하여 문자열을 안전한 HTML이 되도록 한다. ({{ myvariable|safe }})
  3. 일시적으로 모두 자동변환(autoescape) 시스템을 해제한다.
 (참조: Flask 문서)

본문에서는 두번째 방법을 적용했다. 


ykd

작성자: ykd

댓글 쓰기

0 댓글