데이터시각화18 [Highcharts] x축 날짜 표시 조정하기 안녕하세요 :) 프론트엔드 개발을 하다 보면 "안됩니다" 유혹에 빠지기 쉬운 것 같습니다. 디자이너님이 정말 예쁜 디자인을 구상해 오면 대부분의 경우 로직이 복잡해지기 마련입니다. 빠른 개발 일정으로 인해 심신이 지쳐있는 경우라면 "안됩니다"라고 말해버리고 싶은 충동이 가끔 들기도 하죠. 오늘 작업한 내용도 사실 고민을 많이 했습니다. 위의 차트를 보면 x축의 일자 표시가 매월 1일부터 시작하고있습니다. 따라서 가장 최근 달의 tick이 y축에 상당히 붙어 있음을 확인 할 수 있습니다. 이 포스팅을 쓰는 시점이 10월 4일이었거든요 ㅎㅎ 하지만 디자이너님이 바랬던 x축 디자인은 매월의 중간에 tick이 표시되는 것이었습니다. 예를들어 10월 1일이 아닌 10월 15일의 위치에 날짜가 표시되는 방식으로 말.. 2023. 10. 4. [SVG] SVG를 이용한 gauge 차트 만들기 안녕하세요 :) 오늘은 게이지 차트를 아래와 같이 만들어 보았습니다. 고등학교 때 배운 삼각함수 개념정도만 이해하고 있으면 차트를 만드는데 큰 어려움은 없습니다. 1. 삼각함수를 이용해 좌표값 구하기 게이지 차트를 위해 가장 중요한 좌표는 게이지가 끝나는 지점 (sx, sy)입니다. (s는 starting의 약어인데 적절하지 않은 변수명이네요 ㅠㅠ) 코사인 세타에 반지름을 곱하면 cx에서 sx까지의 거리값이 나옵니다. 여기에다 중앙값인 cx값을 더하면 sx값이 구해지게 됩니다. y좌표도 마찬가지 방법으로 구했습니다. 2. SVG 태그를 이용해 호 그리기 이부분이 살짝 어려운데요, 공식문서를 찾아보면 Arc를 그리는 방법에 대해 설명이 되어 있습니다. SVG에서 Arc를 그리기 위해서는 꽤나많은 파라미터를.. 2023. 8. 1. [SVG] Catmull-Rom 알고리즘으로 svg 차트 만들기 안녕하세요 :) 오늘은 아래 사진과 같은 ui 작업 도중에 차트가 있는 것을 확인했습니다. 주식 관련 어플에서 흔히 볼 수 있는 차트인데요, 이부분을 구현하는데 약간의 고민이 있었습니다. 어플의 다른 차트 부분은 ui 라이브러리를 이용하고 있는데, 이 부분을 ui 라이브러리를 사용하는 게 맞는지 고민되었습니다. 왜냐하면 ui 라이브러리를 이용하면 아래와 같은 단점이 있기 때문입니다. 렌더링 부담 비대한 로딩 용량 디자인 유연성 하락 라이브러리 비교 및 테스팅 위의 ui는 목록 형식으로 다량의 ui가 반복해서 호출될건데 되도록이면 가벼운 ui가 좋겠다고 생각되어 svg를 이용해 직접 만들기로 했습니다. 차트를 만드는 방법은 흔히 svg와 canvas를 이용하는 방법이 있는데요, 여기서 svg를 이용한 이유.. 2023. 7. 13. [UI] styled-components를 이용한 원형 차트 만들기 안녕하세요, 개발자 Sean입니다. 오늘은 원형차트 ui 관련 내용을 포스팅하려고 합니다. 아래 사진의 우측 상단에 들어가는 조그마한 차트입니다. 사실 팀에 합류하고 차트 ui 제작을 해본 경우는 매우 드문데요, 왜냐하면 외부 라이브러리(highchart)를 이용하는 편이 훨씬 생산성이 높기 때문에 직접 차트 ui를 만들지 않았습니다. 하지만 이번에 개편되는 ui 디자인의 경우 외부 라이브러리를 이용하면 디테일한 부분의 스타일을 수정해주어야 하는 번거로움이 생기는데 반해 직접 구현하기에 어렵지 않은 디자인이라 직접 만들어 보기로 했습니다. 리엑트와 스타일 컴포넌트를 이용했습니다. 우선은 아래와 같이 원형차트 컴포넌트 파일을 만들어 줍니다. 여기서 저는 이름을 CircleChart라고 지었는데 보통은 Pi.. 2023. 3. 9. [Highcharts] 유연한 그룹핑 바차트 만들기 안녕하세요, 개발자 Sean입니다. 베타 버전 배포까지 2회의 스프린트밖에 남지 않아 최근 굉장히 피로에 쩔은 나날을 보내고 있습니다... 오늘은 최근에 새롭게 도전해본 '유연한 그루핑 바차트'에 대해 포스팅해보려고 합니다. 사실 이름이 따로 정해져 있는 건 아니고 제가 그냥 멋대로 지은 이름입니다 ㅎㅎ;; highcharts를 이용해서 아래와 같은 그룹핑 바차트를 만들었습니다. 여기서 그룹핑이란 일정 기간동안의 데이터를 모아서 나타내는 것을 말합니다. 예를 들어 한 달 동안의 데이터를 합친다거나 일주일간의 평균을 내거나 하는 방식으로 말이죠. 하지만 여기서 문제가 하나 발생했습니다. 위처럼 차트 시간이 길어질수록 바끼리 포개지는 문제가 발생했습니다. 생각해보면 당연한 현상입니다. 시각적으로 색깔 구분이.. 2022. 10. 13. [Highcharts] Getting started with Highcharts 3D support Getting started with Highcharts 3D support Highcharts 3D는 차트에 제한적으로 3D 효과를 제공하는 highcharts 모듈이다. 현재까지 3D column chart, 3D pie chart, 그리고 3D scatter chart가 제작 가능하다. LOAD THE REQUIRED FILES. Highcharts 3D를 사용하기 위해선 평소처럼 Highcharts를 불러오고 추가적인 3D 플러그인 모듈을 로드해야 한다: (위 코드가 highcharts.js 이후에 추가되어야 한다) CONFIGURING THE 3D OPTIONS FOR A CHART. 3D 모듈을 로딩하는 것만으로 기존에 있던 차트 틀을 변경하진 않는다. 정확하게 3D로 설정이 되어야 3D와 일.. 2022. 5. 18. [Highcharts] Drill down Drill down drilldown 기능에 대해 더 자세히 그리고 더 많은 예제를 알고 싶다면 API 문서를 참고하라. 3.0.8 버전 이후로, Highcharts는 drilldown 기능을 지원한다. 포인트 환경설정에 drilldown.series 배열에 해당하는 시리즈 환경 drilldown 옵션을 넣어줌으로써 포인트는 숨겨진 시리즈와 연결된다. 포인트가 클릭되면, 시리즈가 차트에 로드되고 이미 존재하는 시리즈는 교체된다. 칼럼과 바 그리고 파이 시리즈의 경우 한 번의 클릭이 드릴다운 시리즈로 변환됨을 알려줌을 시각적으로 도와주는 애니메이션이 발생한다. 포인트를 각 시리즈에 체이닝함으로써 다층 간 드릴링도 가능하다. BASIC SETUP 기본 셋업으로, drilldown 시리즈는 drilldown .. 2022. 5. 13. [Highcharts] Labels and string formatting Labels and string formatting Highcharts에서 텍스트가 사용되는 곳이면 어디든 formatters 혹은 format 옵션을 이용해 변형을 할 수 있다. 모든 format 스트링 옵션은 상응하는 formatter 콜백 함수가 있다. formattera 콜백은 더 유연한 반면, format 스트링은 보통 더 콤팩트하며, JSON과 호환 가능하다. HTML IN HIGHCHARTS Highcharts에서 텍스트와 레이블은 html로 주어진다. 하지만 html은 svg로 파싱 되고 렌더링 되기 때문에 오로지 subset만이 지원된다. 다음과 같은 태그들이 지원된다: , , , , , . Spans는 스타일 특성으로 꾸밀 수 있는데, 오로지 텍스트 관련 CSS인 svg만이 가능하다. .. 2022. 5. 13. [Highcharts] Zooming Zooming HIGHCHARTS BASIC Highcharts에서 줌잉은 x축 y축에서 각각 할 수 있다. chart.zoomType 옵션은 x, y, 혹은 xy로 설정된다. 마우스 포인터로 줌잉은 차트에 사각형 모양으로 드래깅을 하면서 실행된다. 만약 chart.panKey가 설정되어 있다면, 사용자는 키를 누르고 마우스를 드래그해 줌잉 할 수 있다. 그렇지 않다면, 사용자는 줌잉된 영역에서 줌잉할 수 없고 새로 다시 줌잉을 해야 한다. 줌잉을 할 때, 사용자가 줌아웃 할 수 있도록 하는 버튼이 표시된다. 프로그래밍적으로, Chart.zoomOut 함수가 같은 효과를 낼 수 있다. 터치 장비에서 사용자는 차트 영역을 집어서 줌잉할 수 있다. 다른 디바이스에서는 한 손가락으로 차트를 이동하면서 줌잉된 .. 2022. 5. 12. [Highcharts] Plot bands and plot lines Plot bands and plot lines plot lines와 plot bands는 사용법이 꽤 비슷하다. 둘 다 color, events, id, label, 그리고 zIndex를 옵션으로 가진다. 선과 밴드는 정의된 축 안에서 항상 수직을 이룬다. polar 차트나 gauge에서 이를 사용하면 매우 흥미로운 예시를 만들 수 있는데 이는 이후에 설명하도록 하겠다. plot band/line이 x축과 y축 모두에서 사용되면, 아래 그림과 같이 y축 plot band/line이 먼저 나타나게 된다. plot band는 x축 y축 모두 만들 수 있으며 둘 다 한 번에 생성 가능하다: xAxis: { ..., plotBands: [{ color: 'orange', // Color value from: 3.. 2022. 5. 12. [Highcharts] Scrollbars Scrollbars Highcharts에서는 크게 두 개의 스크롤바가 있다. 1. 모바일의 네이티브 스크롤바 이 스크롤바는 scrollablePlotArea에서 minWidth를 설정함으로써 적용 가능하다. plot의 너비가 설정값보다 작아지면 페이지에 내 div에 스크롤링이 적용되고 축과 타이틀 범례 그리고 가들 엘리먼트는 고정된 채로 있는다. 이는 긴 데이터 시리즈를 좁은 모바일 뷰에서의 지원을 용이하게 한다. 2. API 옵션을 통한 축 스크롤바 이 스크롤바는 축마다 적용가능하고 각 축의 옆부분에 표시된다. Highcharts Stock에서는 어떤 축이든 적용 가능하다. 적용 가능한 모든 옵션은 Highcharts Stock의 API 문서에서 확인 가능하다. 스크롤바는 stock chart나 y축에.. 2022. 5. 12. [Highcharts] Legend Legend 범례는 미리 설정된 심벌과 시리즈의 이름을 차트에 표시하는 부분이다. 시리즈는 범례를 통해 enabled disabled 될 수 있다. 2022. 5. 12. 이전 1 2 다음
