highcharts18 [Highcharts] Tooltip Tooltip 툴팁은 시리즈의 포인트에 마우스를 호버링 하면 나타난다. 기본값으로 툴팁은 포인트의 값과 시리즈의 이름을 나타낸다. 사용 가능한 옵션을 보기 위해선 API 문서를 참조하라. Appearance 아래 코드는 툴팁의 가장흔한 옵션 외형을 설정하는 코드이다: tooltip: { backgroundColor: '#FCFFC5', borderColor: 'black', borderRadius: 10, borderWidth: 3 } Tooltip formatting HTML의 부분집합으로 렌더링되는 툴팁의 콘텐츠는 implementer에게 권한을 부여함으로써 다양한 방법으로 변경 가능하다. tooltip 환경설정 객체와 더불어, series.tooltip을 이용해 툴팁 안에서 시리즈가 어떻게 표현되어.. 2022. 5. 12. [Highcharts] Series What is a series? 시리즈란 데이터의 묶음으로 선형 그래프나 칼럼들의 집합을 예로 들 수 있다. 모든 차트에 표시되는 데이터는 시리즈 객체로부터 온다. 시리즈 객체는 아래와 같은 구성을 가진다. series: [{ name: '', data: [] }] 주의: 시리즈 객체는 배열이다. 즉 여러개의 시리즈를 포함할 수 있다는 의미이다. Name 키워드는 시리즈에 이름을 부여하는데 이름은 시리즈에 호버링 하면 나타나며 범례에서도 나타난다. The data in a series 실제 데이터의 특성은 배열로서 표현되고 세 가지 방법으로 나타낼 수 있다. 1. 숫자 값 리스트: 이 경우, 숫자 값은 y값으로 해석되고 x값은 0에서 시작해 1씩 증가하거나 pointStart과 pointInterval .. 2022. 5. 12. [Highcharts] Bubble legend Bubble legend Introduction 버블 범례는 추가적인 엘리먼트로 차트 범례 어디서든 붙일 수 있다. 버블 범례는 버블 시리즈의 크기를 간단하고 투명한 방식으로 크기를 표할 수 있다. Demo with autoranges Demo with the bubble legend styled in a similar way to the series Demo with ranges Installation 사용을 위해선 highcharts-more.js 라이브러리가 필요하다. 버블 범례를 나타내기 위해서는, legend.bubbleLegend.enabled값을 true로 바꾸면 된다. Configuration bubbleLegend의 코드는 세팅하기 매우 쉬우며 다양한 커스터마이징이 가능하다. minSiz.. 2022. 5. 12. [Highcharts] Axes Axes x축과 y축은 cartesian coordinate system 데이터 값을 가지는 모든 차트에 기본적으로 표시된다. 아래는 축 요소에 대한 대략적인 개념도이다. Axis labels, tickmarks and gridlines 축 레이블, 틱마크 그리고 그리드 라인은 밀접하게 연관되어 있고 함께 확장된다. 포지셔닝은 차트에서 데이터가 표시되는 가장 최적화된 핏으로 계산된다. TICKS 틱마크는 축에 따라 그어진 선들이며 재량 단위를 보여준다. 틱 사이의 공간은 tickInterval과 tickPixelInterval 옵션에 의해 결정된다. 레이블과 그리드 선은 틱 마크와 같은 공간에 놓인다. tickInterval 옵션은 축에서 틱간의 거리를 결정한다. 기본값은 null인데 이는 선형 그리고 .. 2022. 5. 8. [Hightcharts] Title과 Subtitle Title and subtitle 타이틀은 기본 설정값으로 차트의 최상단에 위치한다. 그리고 섭 타이틀이 그 아래 표시될 수 있다. 타이틀과 섭타이틀은 아래 예시처럼 설정할 수 있다. title: { text: 'My custom title' }, subtitle: { text: 'My custom subtitle' } 타이틀과 섭타이틀은 기본 설정 특성에 따라 이동될 수 있다. (align, float, margin, verticalAlign, x, y) 2022. 5. 6. [Highcharts] highchart 차트 개념이해 다음 주부터 프런트엔드 개발자로 일을 하게 되었다. 그동안 PM으로 개발자분들에게 작업을 구걸하는(?) 일만 하다가 직업 코드를 짜는 입장이 되니, 기분이 싱숭생숭하다. 보아하니 highcharts 라이브러리로 데이터 시각화 작업을 많이 하는 듯하여, 관련 라이브러리에 대해 본격적으로 공부해 보려고 한다. 우선 highcharts 라이브러리는 각종 지도나 그래프 등 차트를 자바스크립트(혹은 타입 스크립트)를 이용해 프로그래밍적으로 쉽게 구현할 수 있도록 각종 기능을 지원하는 라이브러리다. 대충 코드를 훑어보니 객체 형식으로 개발자가 쉽게 차트를 만들 수 있도록 구현해놓은 점이 눈에 띄었다. 이번 포스팅에서는 highcharts 라이브러리에서는 차트를 어떻게 구성하고 명명하는지 개념을 알아보자. Under.. 2022. 5. 6. 이전 1 2 다음
