Chart.js6 [AT] 34. 우량주 매매시점 알림 Dashboard 제작 (2) 이번에는 저번시간에 이어서 우량주 매매시점 알림 대시보드의 첫번째 줄의 두번째와 세번째 카드에 대해서 제작해 보도록 하겠습니다. 해당 카드의 모습은 아래와 같습니다. 해당 카드들은 왼쪽의 MACD와 Signal선의 Cross별 통계를 보여주는 카드와, 오른쪽의 Cross별 세부 종목 리스트를 보여주는 카드로 구성되어 있기 때문에, 한번에 다루도록 하겠습니다. 두 카드간 동작은, 왼쪽카드의 chart 내 특정 data에 대한 영역을 클릭하게되면 오른쪽 카드에 해당 대상이 자동으로 표출됩니다. 만약, 빨간색의 GC영역을 클릭하면 오른쪽에 MACD vs Signal Cross Stock List에서는 Gold Cross에 해당하는 2건의 종목이 보여지게 되고... 라임색의 Point영역을 클릭하면 오른쪽에 2.. 2021. 4. 2. [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. [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 다음
