Python - Flask 에서 Chart.js Legend 구현하기


#python, #flask, #chart.js

웹에 그래프를 그리는 Javascript Library 중에 Chart.js 가 있다. 꽤 심플해서 사용하는데 legend 이 없어서 검색을 해보니 아래와 같은 방식으로 legend 을 구현한다. Chart Options 에 아래 내용을 추가한다.

//String - A legend template
legendTemplate : "<ul class="\"<%=name.toLowerCase()%">-legend\"><li><span style="\"background-color:<%=datasets[i].strokeColor%">\"></span></li></ul>"

그래프 생성 후 아래 코드를 호출한다.

myLineChart.generateLegend();
// => returns HTML string of a legend for this chart

위와 같이 호출하는 경우 HTML 코드가 반환되기 때문에 아래와 같이 정해진 id 에 반환된 HTML 코드를 넣으면 된다.

<div id="legend"></div>
document.getElementById('legend').innerHTML = myLineChart.generateLegend();

이 때 css 를 아래와 같이 입력해두면 작은 사각형으로 그려낼 수 있다.

#legend li span {
  display: inline-block;
  width:11px;
  height:11px;
  margin-right:7px;
}

하지만 이를 Flask 에서 실행하는 경우 아래와 같은 에러가 발생한다.

"TemplateSyntaxError: tag name expected"

jinja2 와의 문법 충돌 때문인데, {% 와 %} 를 {\% 와 \%} 로 수정해야 한다. 즉, 위 코드를 아래와 같이 수정하면 된다.

legendTemplate : "<ul class="\"<%=name.toLowerCase()%">-legend\"><li><span style="\"background-color:<%=datasets[i].lineColor%">\"></span></li></ul>"}

Reference