vue-chartjs5 [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. [Vue.js] 16. use doughnut chart with label plugin vue-chartjs를 사용하다 보면, 여러가지 custom하고 싶은 욕구가 생기기 마련입니다. 물론 다른 여러가지 chart를 그려주는 library를 사용할때도 마찬가지 입니다. 오늘은 vue-chartjs 중 doughnut chart를 구현할 때, 적용한 여러가지 항목에 대해서 알아보겠습니다. 0. DoughnutChart.vue 생성하기 기본적으로 vue-chartjs는 component로 구성이 됩니다. 따라서 doughnut chart를 그려주는 vue는 default로 제작하며, dataCollection과 options를 그 props로 지정하여 전달하면 됩니다. [DoughnutChart.vue] 이제 나머지 대다수는 options setting에 따라서 달라지며, 필요한 경우에는 pl.. 2021. 3. 30. 이전 1 2 다음
