Front-End/highcharts18 [Highcharts] "removePoint" 에러 해결 안녕하세요 :) 오늘은 하이차트 작업 중에 위와 같은 에러가 발생했습니다. 필터를 선택하면 필터에 따라 위의 플래그가 나타나는 기능을 구현 중이었습니다. 이런저런 실험을 진행해 보니 아무래도 차트를 리렌더링 하는 과정에 문제가 발생하는 듯합니다. 정확한 원인을 파악하지 못했지만, 이전에 하이차트가 기존의 데이터를 캐싱해 발생하는 문제를 겪어본 경험이 있어 관련 문제라 짐작하고 해결을 시도해 보았습니다. 저의 경우 리엑트를 사용하고 있기 때문에 리엑트 라이브러리에 관련 옵션이 있는지 살펴보았고 아래와 같은 설정이 가능하다는 것을 발견 했습니다. immutable Boolean no false Reinitialises the chart on prop update (as oppose to chart.updat.. 2024. 1. 17. [Highcharts] x축 날짜 표시 조정하기 안녕하세요 :) 프론트엔드 개발을 하다 보면 "안됩니다" 유혹에 빠지기 쉬운 것 같습니다. 디자이너님이 정말 예쁜 디자인을 구상해 오면 대부분의 경우 로직이 복잡해지기 마련입니다. 빠른 개발 일정으로 인해 심신이 지쳐있는 경우라면 "안됩니다"라고 말해버리고 싶은 충동이 가끔 들기도 하죠. 오늘 작업한 내용도 사실 고민을 많이 했습니다. 위의 차트를 보면 x축의 일자 표시가 매월 1일부터 시작하고있습니다. 따라서 가장 최근 달의 tick이 y축에 상당히 붙어 있음을 확인 할 수 있습니다. 이 포스팅을 쓰는 시점이 10월 4일이었거든요 ㅎㅎ 하지만 디자이너님이 바랬던 x축 디자인은 매월의 중간에 tick이 표시되는 것이었습니다. 예를들어 10월 1일이 아닌 10월 15일의 위치에 날짜가 표시되는 방식으로 말.. 2023. 10. 4. [Highcharts] 바차트에서 radius값 적용하기 안녕하세요 :) 오늘은 바차트 ui를 만들었는데요, 디자이너님이 네 모서리 모두 예쁘게 둥근 바차트를 디자인으로 넣어주셨습니다. 그래서 아래와 같이 borderRadius값을 넣어주었는데요, plotOptions: { bar: { pointWidth: 12, borderRadius: '30%', dataLabels: { enabled: false }, stacking: 'normal', borderWidth: 0, } }, 문제는 radius 적용이 오른쪽 상단과 오른쪽 하단만 되는 것이었습니다. highcharts 포럼을 뒤적이니 series에 borderRadiusTopLeft, borderRadiusBottomLeft 등의 값을 적용해 문제를 해결할 수 있다고는 나와있지만 documentation을.. 2023. 8. 23. [Highcharts] Key events 플래그 만들기 안녕하세요 :) 구글 파이낸스 웹사이트에서는 Key events라는 신기한 기능을 지원하길래 비슷한 기능을 highchart로 구현해 보았습니다. Key events란 특정 시점에 어떤 일이 있었는지 자세히 알려줄때 유용한 기능입니다. 위와 같이 차트상 어떤 시점에 중요한 이벤트가 있었다면 표시하는 방식으로 사용자가 빠르게 중요 과거사에 대해 알 수 있도록 해줍니다. 지금 근무하는 회사에서도 주식 차트를 다루기 때문에 해당 기능을 구현하면 좋겠다 싶어 한번 기능 구현만 간단하게 해 보았습니다. 사실 highchart에서는 필요한 기능을 이미 지원하기 때문에 별다른 기능추가 없이 간단하게 keyEvents 차트를 만들 수 있습니다. 위 플래그 부분의 경우 아래와 같이 코드를 추가하면 됩니다. { type:.. 2023. 5. 22. [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 다음
