Vue.js30 [AT] 33. 우량주 매매시점 알림 Dashboard 제작 (1) 이제 본격적으로 우량주 매매시점 알림 대시보드(Dashboard)의 각 영역별로 구현하는 방법에 대해서 알아보겠습니다. 우선 첫 시간으로 첫째줄의 첫번째 영역에 대해서 보시죠~!! 아참!! 그리고 Dashboard의 전체적인 구성에 대해서는 제가 기존에 작성했던 vue.js쪽 내용을 참조해주시면 되겠습니다. 2021.03.04 - [Vue.js] - [Vue.js] 13. use Grid System [Vue.js] 13. use Grid System 이번에는 Dashboard 등 화면 Layout구성의 근간이 되는 Grid System에 대해서 알아보고자 합니다. Vuetify에서는 Layout 구성을 위한 방법을 제공하는데... 그것이 Grid System 입니다. 1. Grid System이란? V.. 2021. 4. 1. [Vue.js] 17. use chart.js event and label plugin listeners 이번 시간에는 vue-chartjs를 통해서 그린 chart에 대해서 마우스를 올렸을 때, tooltips로 자동제공하는 정보가 아닌... 마우스 click이나 기타 event(이벤트)를 발생시켜서 원하는 동작을 하게하는 방법에 대해서 알아보겠습니다. 저같은 경우에는 위의 그림과 같이 그려진 chart의 dataset중 한개의 특정 data를 선택하여 click을 하게되면, 해당 data와 관련된 다른 정보를 보여주거나, 다른 기능을 추가로 제공하고자 했었습니다. 따라서 그것이 가능하기위한 기능을 추가해야 했는데... 그게 바로 아래의 2가지 방법입니다. 그럼 각 방법에 대해서 알아보도록 하겠습니다. 1. chart.js Events chart.js의 docs를 살펴보면, General > Interac.. 2021. 4. 1. [AT] 32. 우량주 매매시점 알림 Dashboard 제작 (0) 지난 시간에는 키움증권에서 제공하는 전체 종목에 대해서 Dart(전자공시시스템)의 OPEN Data를 통해서 재무제표 정보를 얻어왔습니다. 이를 통해서 자신이 설정한 기준을 통해 우량주를 추출해서 DB에 저장하는 로직까지 구현해 보았습니다. 이제부터는 DB에 저장된 정보를 화면에 뿌려주고, 필요한 정보를 알려주는 대시보드(Dashboard)를 제작해 보도록 하겠습니다. 우선 전체 제작된 모습을 확인하고 하나하나 제작하는 방법을 알아보도록 하겠습니다. 1. Dashboard 개요 [개발환경] AT-Front : vue.js v2.9.6 AT-Back : SpringBoot Framework v2.4.2 (openjdk version v1.8.0_282) DBMS : MariaDB v5.5 [AT-Front.. 2021. 3. 31. [Vue.js][Error] type check failed for prop "chartData" vue-chartjs로 개발을 수행하다보면 아래와 같은 Error를 만날 수 있습니다. 그 이유에 대해서 간단히 살펴보도록 하겠습니다. [Vue warn]: Invalid prop: type check failed for prop "chartData". Expected Object, got Null 보통 개발을 수행하면, 사용하는 library의 개발자 혹은 개발사에서 제공하는 docs를 참조하게 됩니다. 물론 vue-chartjs도 해당 가이드를 제공합니다. (vue-chartjs.org/) 해당 Getting Started를 통해서 참조하여 개발을 수행하면, 해당 Error가 발생하는데... 우선 내용만 분석을 해보면 prop로 전달하는 chartData가 Object를 원하지만 Null이 들어왔다는.. 2021. 3. 31. 이전 1 2 3 4 5 6 ··· 8 다음
