포트폴리오 이론과 효율적 투자선에 대해선 제가 간단하게 소개한 글이 있으니 읽어주시면 감사하겠습니다.
https://sieon-dev.tistory.com/40?category=989136
Harry Markowitz의 포트폴리오 이론과 효율적 투자선
현대 포트폴리오 이론 (Modern Portfolio Theory 이하 MPT) 포트폴리오 이론은 해리 마코위츠에 의해 체계화된 이론으로 자산을 분산투자하여 포트폴리오를 만들게 되면 분산투자 전보다 위험을 감소시
sieon-dev.tistory.com
개발환경
Backend : Python django
Frontend : Chartjs, Jquery
개요
효율적 투자선이라는 개념이 쓰이는 웹사이트는 많이 없겠지만 웹 상에 차트나 그래프를 그릴 일은 많을 것입니다.
이 포스팅은 파이썬 장고와 chartjs를 사용해서 사용자의 자산을 최적화해주는 방법을 기록하기 위함입니다.
*장고 프로젝트를 만들거나 DB 연동, html 등은 알고 있다고 가정하고 작성하겠습니다.
사용자가 입력한 자산의 종목 코드와 비중, 투자 시작 날짜, 투자 끝 날짜를 mystocks_codes, mystocks_weights, from, to로 저장해 view 단으로 전송합니다. 본 게시글에서는 2019-01부터 2020-01까지 삼성전자와 LG디스플레이, 카카오에 0.2, 0.5, 0.3 비중으로 투자하는 것을 가정합니다.
ajax를 사용해 DB에서 정보를 불러오는 방법은 이 게시글을 참조해주세요.
https://sieon-dev.tistory.com/14?category=989047
Django에서 ajax를 사용하여 DB정보 불러오기
Ajax(Asynchronous JavaScript and XML, 에이잭스)는 비동기적인 웹 애플리케이션의 제작을 위해 이용하는 웹 개발 기법이다. Ajax는 쉽게 말해 화면의 깜빡임 없이 서버에 데이터를 요청하고 다시 웹페
sieon-dev.tistory.com
자산과 투자기간 View에 전송
<script>
var code = ['kp005930', 'kp034220', 'kp035720'];
var jname= ['삼성전자', 'LG디스플레이', '카카오'];
var weight = [0.2, 0.5, 0.3];
var from = '2019-01-01';
var to = '2020-01-01';
$(document).ready(function () {
$('#draw').click(function (){
$.ajax({
url: '/get_efline/',
type: "POST",
dataType: "json",
data : {'code' : code, 'weight' : weight, 'from': from, 'to' : to},
success: function (data) {
console.log("성공");
},
error: function (request, status, error) {
console.log('실패');
}
});
});
});
</script>
view.py
@csrf_exempt
def get_efline(request):
code = request.POST.getlist('code[]')
weight = request.POST.getlist('weight[]')
_from = request.POST.get('from')
_to = request.POST.get('to')
data = {'code' : code}
return JsonResponse(data)보시는 바와 같이 view와 배열 형태인 변수를 주고 받기 위해선 변수명 뒤에 []를 붙여주시면 됩니다.
간단하게 ajax 통신이 되는지 테스트 해보기 위해서 실행해봅니다.
home.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<title>plot efficient frontier</title>
</head>
<body>
<p>삼성전자 20%</p>
<p>LG디스플레이 50%</p>
<p>카카오 30%</p>
<p>투자 기간 : 2019-01 ~ 2020-01</p>
<input type="button" value="그리기" id='draw'/>
<div style='width:400px; height:300px'>
<canvas id='efficient_frontier_graph'>
</canvas>
</div>
</body>
<script>
var code = ['kp005930', 'kp034220', 'kp035720'];
var weight = [0.2, 0.5, 0.3];
var from = '2019-01';
var to = '2020-01';
$(document).ready(function () {
$('#draw').click(function (){
$.ajax({
url: '/get_efline/',
type: "POST",
dataType: "json",
data : {'code' : code, 'weight' : weight, 'from': from, 'to' : to},
success: function (data) {
console.log("성공");
},
error: function (request, status, error) {
console.log('실패');
}
});
});
});
</script>
</html>'Front-End' 카테고리의 다른 글
| [JS] new Date() 함수의 위험성 (1) | 2022.08.20 |
|---|---|
| [JS] Object Sorting Issue (0) | 2022.07.27 |
| localstorage를 활용한 메뉴 History 저장 (0) | 2022.05.31 |
| Chartjs를 사용해 효율적 투자선 그리기 - 3편 (0) | 2021.07.27 |
| Chartjs를 사용해 효율적 투자선 그리기 - 2편 (0) | 2021.07.27 |
