반응형
settings.py
내가 받아온 API KEY를 해당 구문에다가 복사 붙여넣기 해준다.
# settings.py
# https://www.koreaexim.go.kr/ir/HPHKIR019M01#tab1 현재 환율 api
EXCHANGE_DATA_API_KEY = '내가 받아온 API KEY'
views.py
호출을 성공 시 출력되는 수 많은 변수 명이 있지만 우리는 환율 정보를 구성 하기 위해서 필요한 정보들만 들고 올거라 몇가지만 사용하도록 하겠음
- 1년 중 12개월동안 변화 데이터를 뽑기 위해서 30일 마다 12번 데이터를 뽑아주기로함
- 출력결과 (Response Element)
RESULT Integer 조회 결과 1 : 성공, 2 : DATA코드 오류, 3 : 인증코드 오류, 4 : 일일제한횟수 마감 CUR_UNIT String 통화코드 CUR_NM String 국가/통화명 TTB String 전신환(송금)
받으실때TTS String 전신환(송금)
보내실때DEAL_BAS_R String 매매 기준율 BKPR String 장부가격 YY_EFEE_R String 년환가료율 TEN_DD_EFEE_R String 10일환가료율 KFTC_DEAL_BAS_R String 서울외국환중개
매매기준율KFTC_BKPR String 서울외국환중개
장부가격 - CUR_NM : 국가/통화명
- kfc_deal_bas_r : 서울 외국환중개 매매기준율
- cur unit : 통화 코드
import pandas as pd
import matplotlib as plt
def exchange_rate(request):
api_key = settings.EXCHANGE_DATA_API_KEY
exchange_data = []
# 지난 12개월 각각의 첫 날짜에 대한 데이터 가져오기
for i in range(12):
first_day_of_month = (datetime.datetime.now() - datetime.timedelta(days=30 * i)).replace(day=1)
date = first_day_of_month.strftime("%Y%m%d")
url = f'https://www.koreaexim.go.kr/site/program/financial/exchangeJSON?authkey={api_key}&searchdate={date}&data=AP01'
response = requests.get(url)
if response.status_code == 200:
day_data = response.json()
if day_data:
for item in day_data:
cur_nm = item.get('cur_nm')
kftc_deal_bas_r = item.get('kftc_deal_bas_r')
cur_unit = item.get('cur_unit')
if cur_nm and kftc_deal_bas_r:
exchange_data.append({'date': date, 'currency': cur_nm, 'rate': kftc_deal_bas_r, 'cur_unit': cur_unit})
# DataFrame 생성 및 처리
df = pd.DataFrame(exchange_data)
df['date'] = pd.to_datetime(df['date'], format="%Y%m%d")
df['rate'] = df['rate'].str.replace(',', '').astype(float)
# 통화별 월별 평균 환율 계산
df['month'] = df['date'].dt.to_period('M')
average_rates = df.groupby(['currency', 'month'])['rate'].mean().reset_index()
# 'month' 열을 문자열로 변환
average_rates['month'] = average_rates['month'].dt.strftime('%Y-%m')
# 템플릿으로 전달할 데이터 준비
chart_data = average_rates.to_json(orient='records')
return render(request, 'exchange.html', {'chart_data': chart_data})
exchange.html
Tailwind CSS를 활용해 Chart.js를 이용한 차트 생성을 해줬음
1. 차트 생성 및 데이터 시각화 :
서버로부터 전달받은 ('chartData')는 각 국가의 통화에 따라 분류되어서 시간대별 환율을 나타내줌
각 통화별 데이터는 별도의 데이터셋('datasets')으로 변환되어 차트에 표시 됨
('getRandomColor') 함수를 이용해서 각 통화별로 다른 색상의 선을 생성해서 차트의 가독성을 높여줌
<div class="content bg-gray shadow-md rounded-lg p-6 mx-4 my-6">
<h1 class="text-2xl font-semibold text-white-600 text-center">각 국가 별 통화 추이</h1>
</div>
<div class="max-w-6xl mx-auto p-3 shadow-lg rounded-lg bg-gray">
<canvas id="exchangeRateChart"></canvas>
</div>
<div class="current-time" id="current-time">현재 시간: </div>
<script src="{% static 'js/base.js' %}"></script>
<script src="{% static 'js/navbar.js' %}"></script>
<script>
// 서버로부터 전달받은 데이터
var chartData = JSON.parse('{{ chart_data|safe }}');
// 통화별 데이터를 그래프 데이터 포맷으로 변환
var datasets = [];
var currencies = [...new Set(chartData.map(item => item.currency))];
currencies.forEach(function(currency) {
var currencyData = chartData.filter(item => item.currency === currency);
var data = currencyData.map(item => ({x: item.month, y: item.rate}));
datasets.push({
label: currency,
data: data,
fill: false,
borderColor: getRandomColor(), // 색상은 임의로 설정
});
});
// 차트 생성
var ctx = document.getElementById('exchangeRateChart').getContext('2d');
var exchangeRateChart = new Chart(ctx, {
type: 'line',
data: {
datasets: datasets
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
// 임의 색상 생성 함수
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
결과 :
굳
반응형