절차
1. app - index page 생성
2. high chart 사이트 접속 원하는 그래프 찾기
3. url, views, html 작성
4. 데이터 가져오기
1. high chart 사이트
https://www.highcharts.com/demo
Highcharts | Highcharts.com
www.highcharts.com
사이트에 접속하면 다음과 같이 보인다.
default - dark unica - sand signika -grid light 를 눌러보면 각 그래프 테마를 확인할 수 있다.
여기서 원하는 그래프를 클릭하고, 하단 EDIT IN CODEPAN 을 클릭하면 html, css, js 코드를 확인할 수 있다.
2. urls, views, html 작성
! root web의 settings에서 installed_app에 추가하는것 잊지 말기
* urls
from django.urls import path
from chartApp import views
urlpatterns = [
path('main/', views.index),
path('line/', views.line),
]* views
from django.shortcuts import render
def line(request):
print(' !!! chart App line !!! ')
return render(request, 'chart/line.html')- print문은 views 함수까지 정상 작동하는지 확인하기 위해 디버그 차원에서 넣었다.
- 데이터를 넘겨 보내지 않고, 해당 코드로는 예시에 제시된 데이터로만 화면을 구성할 수 있다.
+ static directory 생성
- html에 css와 script 구문을 모두 작성할 수 있지만, 따로 static directory를 만들어 관리할 수 있다.
- static files를 한번에 관리하기 위해서는 rootweb.settings에 다음 구문을 추가해줘야 한다.
STATICFILES_DIR = [
os.path.join(BASE_DIR, 'frontApp', 'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')- terminal 창을 열어 다음을 수행시켜야 완료된다.
> python manage.py collectstatic* html
<!DOCTYPE html>
<html lang="en">
<!-- 1. static 사용 -->
{% load static %}
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 2. 사이트 html 하단 script 태그 위치 -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<!-- 3. css 속성 가져오기 -->
<link rel="stylesheet" href="{% static 'chart/css/line.css' %}">
</head>
<body>
<!-- 4. 사이트 html 하단 figure 태그 -->
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
This chart shows how symbols and shapes can be used in charts.
Highcharts includes several common symbol shapes, such as squares,
circles and triangles, but it is also possible to add your own
custom symbols. In this chart, custom weather symbols are used on
data points to highlight that certain temperatures are warm while
others are cold.
</p>
</figure>
<!-- 5. <script src="{% static 'chart/js/line.js' %}" ></script> -->
<!-- 6. script -->
<script>
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return this.value + '°';
}
}
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
name: 'Tokyo',
marker: {
symbol: 'square'
},
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
y: 26.5,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
marker: {
symbol: 'diamond'
},
data: [{
y: 3.9,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)'
}
}, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
</script>
</body>
</html>1. static 자원을 사용한다. <head> 태그 위쪽에 선언해 주어야한다.
2. high chart 사이트의 코드들 중 html의 script 태그부분을 붙여준다.
- script 자원을 import 하기 위함
3. static 디렉토리에서 만들어준 css 파일을 가져와 사용한다.
- <link> 태그의 href 속성값으로 css파일 경로를 입력해준다.
4. high chart 사이트의 코드 중 html의 figure 태그 부분을 붙여준다.
- <div>의 container에 script 내용이 담긴다.
- <p> 부분은 그래프 하단에 작성된 글이다 마음대로 수정 가능
5. static 디렉토리에 js 파일이 작성되어 있다면 src 속성에 경로를 입력하여 사용 가능하다.
6. script 문
- script문은 구체적으로 분석하기보다 구문을 읽어보면 어떤 내용으로 작성되었는지 감을 잡을 수 있다.
- 필요하면 구교수님께 도움 받기
3. 데이터 보내기
데이터는 views를 사용하여 바꿔볼 수 있다.
예시로 사용한 그래프는 highchart 페이지의 선 그래프 중 날씨 그래프이다.
예시로 사용된 데이터는 도쿄와 런던의 월별 평균기온이다. 이제 임의로 데이터를 수정해보자.
먼저 <script> 태그는 아래와 같다.
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
// 1
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return this.value + '°';
}
}
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
name: 'Tokyo',
marker: {
symbol: 'square'
},
// 2
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
y: 26.5,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
marker: {
symbol: 'diamond'
},
data: [{
y: 3.9,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)'
}
}, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});크게 살펴보자면 두 가지를 이야기할 수 있다.
1. axis
- x 와 y의 축을 정의한다. 해당 예시에서는 x 축으로 각 월(Jan ~ Dec)을, y 축으로는 온도를 설정했다.
- 여기서 내가 x축을 재정의하고 싶다면 category를 수정하면 된다.
2. data
- 실질적인 데이터는 series에 포함된다.
- 예시에서 series의 value를 보면 Tokyo와 London 을 name으로, 각 월별 기온을 데이터로 담고있다.
- 데이터 중간에 { }로 속성을 부여한 값들이 있다. 예시를 보면 해당 값의 자리에 해와 구름 그림이 있는걸 확인할 수 있다. 즉, 데이터 중간에 꾸밈 속성을 추가할 수 있다.
* views
def line(request):
london = [3.9,4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
tokyo = [-3.2, 6.9, 9.5, 14.5, 30, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
context = {
'london' : london,
'tokyo' : tokyo,
}
return render(request, 'chart/tmp.html', context)임의로 데이터 값을 주고 값을 갱신한다. (tokyo 의 첫번째, 중간을 -3과 30으로 바꿈)
- 변수를 정의하고 dictionary 형으로 데이터를 묶어준다.
- render를 통해 정의된 dict형 데이터를 넘겨준다.
* script
series: [{
name: 'Tokyo',
marker: {
symbol: 'square'
},
data: {{tokyo}}
}, {
name: 'London',
marker: {
symbol: 'diamond'
},
data: {{london}}
}]스크립트의 series 부분만 가져왔다.
- data를 views로 부터 넘겨받은 context의 key값을 {{ }} 로 묶어서 입력해준다.
- 해당 키값의 value가 데이터로 입력된다.
이렇게 그래프를 변경시킬 수 있다.
추가 - 워드클라우드
배운 내용의 실습으로 워드클라우드를 만들어 보았다.
워드클라우드의 데이터를 갱신하고자 하다가 오류에 시간을 보냈다.
string 형으로 넘어오는 데이터는 script 에서 ' ' 따옴표로 묶어 문자열처리를 다시해서 받아야한다.
* views
def wordcloud(request):
print('!!! chart app wordcloud !!!')
txt = 'qwerqwrqer'
tmp = 3
context = {'txt' : txt, 'tmp':tmp}
return render(request, 'chart/wordcloud.html', context)- views에서 문자열 txt를 넘겨주었다.
- tmp는 오류 원인을 찾느냐고 넣어봤다
*script
var text = '{{txt}}';
console.log(text)
var lines = text.split(/[\ ]+/g),- script 에서 text라는 변수로 txt를 받고 싶었는데 {{ }} 만으로 데이터를 받으면 오류가 났다.
- tmp 변수를 받았을 때는 오류 없이 console에서 받은 값을 확인할 수 있었다.
- Uncaught ReferenceError: qwerqwrqer is not defined 라는 메시지를 통해 {{ }} 값이 변수로 인식된다는 것을 알았다.
- '{{ }}' 처럼 넘겨 받은 데이터를 다시 문자로 처리해 줘야 한다.
'Study > django' 카테고리의 다른 글
| django 기초 - bootstrap을 이용한 사이트 만들기 : 5. 로그아웃과 로그인세션 (0) | 2021.08.22 |
|---|---|
| django 기초 - bootstrap을 이용한 사이트 만들기 : 4. 가입 페이지 (0) | 2021.08.19 |
| django 기초 - bootstrap을 이용한 사이트 만들기 : 3. 로그인 페이지 만들기 (0) | 2021.08.19 |
| django 기초 - bootstrap을 이용한 사이트 만들기 : 2. Models, Admin Page로 데이터 관리하기 (0) | 2021.08.19 |
| django 기초 - bootstrap을 이용한 사이트 만들기 : 1. 페이지 틀 구성하기 (0) | 2021.08.18 |
