Django를 공부하던 중, DataBase의 데이터 분포를 나타내기 위해 그래프를 그릴 방법을 생각해보았다.
그래서 구글링을 통해 아주 매력적인 것을 발견하였다.
바로 FusionCharts !!
이 FusionChart는 Django의 view에서 template으로 그래프 데이터를 넘겨준다. (Json 형식으로)!!
물론 Django뿐 아니라 다른 언어에서도 모두 지원된다.
공식 링크를 첨부한다.
https://www.fusioncharts.com/dev/fusioncharts
FusionCharts Dev Centre
Get started with interactive charts and dashboards for your web and mobile applications
www.fusioncharts.com
이 fusionChart를 사용하기 위해서는 fusioncharts 공식 사이트에서 제공하는 파일을 받아야한다.
일반 개인용은 무료지만, 상업용은 유료라는 점!! 유의
일반 개인용받는 방법을 설명하겠다.
1. FusionCharts 파일 다운로드
위쪽의 사이트에 접속해서 Download 클릭!
2. 정보 입력
정보를 입력한 후, Download trial 클릭!
3. File DownLoad
사실 저도 여기서 당황한 부분! 이메일로 아래같은 내용이 왔는데, 파일이 안와서 한참 헤맸다.
알고보니 trial 바로 다음 창에서 클릭을 한번 더 해야했다. ㅠㅠ
4. 받은 파일 확인
5. Django application 폴더/static/ 에 fusioncharts 폴더 생성
fusioncharts 폴더 내에 다운로드한 폴더 중 js 안의 모든 파일을 복사해준다.
6. fusioncharts.py 복사
fusioncharts-suite-xt\integrations\django\fusioncharts-wrapper\fusioncharts.py
다운로드 받은 fusioncharts 폴더 내의 fusioncharts.py를 application폴더에 복사해준다.
간단한 막대그래프 만들기
7. view.py
from collections import OrderedDict
from .fusioncharts import FusionCharts
class chart_VIEW(View):
def get(self, request):
#chartdata 선언
dataSource = OrderedDict()
dataSource["data"] = [] #chartdata는 json형식이다.
#data 값 넣기
dataSource["data"].append({"label": 'data1', "value": '290'})
dataSource["data"].append({"label": 'data2', "value": '50'})
dataSource["data"].append({"label": 'data3', "value": '180'})
dataSource["data"].append({"label": 'data4', "value": '140'})
dataSource["data"].append({"label": 'data5', "value": '100'})
dataSource["data"].append({"label": 'data6', "value": '115'})
chartConfig = OrderedDict()
chartConfig["caption"] = "제목"
chartConfig["subCaption"] = "소제목"
chartConfig["xAxisName"] = "x축이름"
chartConfig["yAxisName"] = "y축이름"
chartConfig["numberSuffix"] = "K" #y축 숫자단위
chartConfig["theme"] = "fusion" #테마
#그래프 특징 설정
dataSource["chart"] = chartConfig
column2D = FusionCharts("column2d", "myFirstChart", "600", "400", "chart-1", "json", dataSource)
#그래프 생성
return render(request, 'chart.html', {'output': column2D.render()}) #render
8. chart.html
{% load static %} #필수!!
<head>
#first
<script type="text/javascript" src="{% static "fusioncharts/fusioncharts.js" %}"></script>
<script type="text/javascript" src="{% static "fusioncharts/fusioncharts.charts.js" %}"></script>
<script type="text/javascript" src="{% static "fusioncharts/themes/fusioncharts.theme.fusion.js" %}"></script>
#second
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
</head>
<body>
<div style="font-family: 'Helvetica Neue', Arial; font-size: 16px">
<h3>{{ chartTitle|safe }}</h3>
<div id="chart-1">{{ output|safe }}</div>
<br/>
</div>
</body>
9. web 확인!
위처럼 FusionCharts를 이용하면 수많은 그래프를 그릴 수 있다.
막대그래프 외에도 많은 그래프에 대한 설명이 fusioncharts공식 홈페이지에 나와 있으니 참고하길 바란다.
'Web > django' 카테고리의 다른 글
| (Django) 사진 적용 (0) | 2020.08.17 |
|---|---|
| (Django) Filter (0) | 2020.08.16 |
| (Django) first project 9 - post show page 만들기 (0) | 2020.08.14 |
| (Django) first project8 - template 확장 (0) | 2020.08.14 |
| (Django) first project7 - Bootstrap 적용 및 정적파일 (0) | 2020.08.13 |
