본문 바로가기

Chart.js6

[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.
[Vue.js] 14. use Vue chart plugin application을 만들다보면, 다양한 수치의 데이터에 대해서 직관적으로 chart로 보여줘야 할 때가 많습니다. 예를들어 AT Project에서 진행하는 MACD / Signal 에 대한 지표에 대해서도 Golden Cross나 Dead Cross를 시각적으로 보는것이 훨씬 이해가 빠를 것 입니다. 이번에는 Vue에서 이러한 Chart를 구현할 수 있도록 해주는 Plugin에 대해서 알아보겠습니다. 뭔가 새로운 것을 내 프로젝트에 적용하려고 할때는 가끔 막막할 때가 많습니다. 하지만 이럴때는 역시 npm repository에서 검색을 해보는게 가장 좋겠죠?? 모든 검색에서는 중요한 것이 검색어 인데... 한번 아래의 키워드로 검색을 해보겠습니다. vue charts 뭐 있나요. 단도 직입적으로 내가.. 2021. 3. 8.