[웹사이트 개발일지] 파이 차트 구현, 절반의 성공

화면에 차트를 만들어 냈다. 앞서 해결하지 못했던 for 문 활용은 다시 보니 생각보다 어렵지 않았다. 변수에 배열을 담아 선언하고 for문으로 인덱스가 증가할 때마다 push 메서드로 값을 추가해준 뒤 for문을 빠져나가 완성된 배열을 사용하니 문제없이 작동했다. 어쩌면 많은 코딩이 이미 내가 알고 있지만 생각해내지 못하는 것일 뿐일지도 모르겠다.

화면에 출력된 삼성전자의 올해 1분기 말 기준 주식 보유 현황이다. 동적인 파이 차트다. 이름을 클릭하면 차트에서 사라지거나 다시 나타난다. 그러나 문제가 있다. 중복되는 이름이 있다. 왜 인가 봤더니 보통주와 우선주를 모두 표시하기 때문이다. 고 이건희 회장은 보통주 4.18%와 우선주 0.08% 가지고 있다. 이렇게 쓰면 하나의 파이 차트에 중복이 발생하는 문제가 있다.

사실 이것보다 더 눈길이 가는 것이, OPEN DART의 데이터 자체가 좀 이상한 면이 있다. 주식 소유 현황이 지분율을 기준으로 내림차순 되서 분류돼 있을 줄 알았는데 그렇지가 않다. 예를 들어 엔씨소프트의 경우 사업보고서 상에는 김택진, 넷마블, 기타 주주처럼 지분율 순으로 간결하게 표현되는데 JSON 데이터에선 사내 관계자들의 소유 현황이 보유 비중과 관계없이 담겨있다. 또 분명 국민연금이라는 이름이 있어야 하는 자리에 단순히 "계"라는 표현으로 저장돼 있기도 하다.

사내 직원이라는 이유로 소량의 주식을 가진 직원들이 표시되며 사실상 의미 없는 차트가 이런 식으로 만들어진다. 혹시 주주현황을 표현하는 적절한 다른 API가 있지 않을까 찾아봤는데 찾지 못했다.

이 표 같은 방식으로 데이터가 저장돼 있길 기대했는데 그렇지가 않다.

 

구현한 것 중 기능적으로 더 다듬어야하는 부분이 많긴 한데, 일단 개발 속도를 내기 위해 다음 스텝으로 먼저 넘어가도록 할 생각이다. 재무 현황 부분도 시각화 작업 진행하고 나중에 하나씩 다듬어야겠다. 하나하나 완성도 있게 가다 보면 늘어질 거 같다. 하나를 해결하면 부수적으로 3~4개는 더 해야하는 기분.

---

알게 된 것

• chart.js 파이 차트 구현
• 예상과 다른 open API 데이터 표기 형식
• for문과 push 메서드로 순차적으로 배열에 값 넣기

모르는 것

• canvas 삭제 후 재사용
• dart API 최대주주현황 적절히 표현

해결할 문제

• 재무상태표(balance sheet) 네모 3가지 영역으로 시각화
• 매출, 영업이익, 당기순이익 등 실적 복합(bar, line) 그래프화
• 재검색시 canvas 태그에 담긴 차트 삭제 후 재사용하도록 구현

 

---

웹페이지 만들기 깃허브 링크(포스팅 시점)

프로젝트 결과물 | 느낀점