Front-End/highcharts

[Highcharts] Series

SeanK 2022. 5. 12. 12:01

What is a series?

시리즈란 데이터의 묶음으로 선형 그래프나 칼럼들의 집합을 예로 들 수 있다. 모든 차트에 표시되는 데이터는 시리즈 객체로부터 온다. 시리즈 객체는 아래와 같은 구성을 가진다. 

series: [{
    name: '',
    data: []
}]

주의: 시리즈 객체는 배열이다. 즉 여러개의 시리즈를 포함할 수 있다는 의미이다. 

 

Name 키워드는 시리즈에 이름을 부여하는데 이름은 시리즈에 호버링 하면 나타나며 범례에서도 나타난다. 

 

The data in a series

실제 데이터의 특성은 배열로서 표현되고 세 가지 방법으로 나타낼 수 있다.

 

1. 숫자 값 리스트: 이 경우, 숫자 값은 y값으로 해석되고 x값은 0에서 시작해 1씩 증가하거나 pointStart과 pointInterval 옵션부터 자동적으로 계산된다. 만약 축이 카테고리를 가진다면, 이렇게 이용될 수 있다. 

예:

data: [0, 5, 3, 5]

 

2. 두개 혹은 그 이상의 배열 리스트: 이 경우 배열의 첫 번째 값은 x값이고 두 번째 값은 Y값이다. 만약 첫 번째 값이 스트링이라면, 포인트의 이름으로 사용되며 위와 같은 규칙에 따라 x값은 증가하게 된다. arearange와 같은 몇몇 시리즈의 경우 2개보다 많은 값을 가진다. 더 많은 타입의 시리즈를 알기 위해선 API 문서를 참조하라.

예:

data: [[5, 2], [6, 3], [8, 2]]

3. 이름이 부여된 값을 가지는 객체 리스트: 이 경우 객체는 포인트 환경설정 객체이다. 사용 가능한 프로퍼티 리스트는 API 문서를 통해 확인 가능하다. 주의할 점은 이 옵션이 Highcharts Stock에서 사용되려면, 총 포인트 수가 turboThreshold를 초과하지 말아야 하거나 turboThreshold 세팅을 늘려주어야 한다.

예:

data: [{
    name: 'Point 1',
    color: '#00FF00',
    y: 0
}, {
    name: 'Point 2',
    color: '#FF00FF',
    y: 5
}]

 

Point and marker

cartesian 차트에서 포인트는 차트의 x, y 값 한쌍을 의미한다. 포인트는 데이터 시리즈에서 각각의 옵션값을 가질 수 있다. 다른 차트 타입에 포인트는 x, y 값이 아닌 다른 값을 의미한다. 예를 들어, range 차트에서, 포인트는 x, low, hight 값을 의미한다. OHLC 차트에서 포인트는 x, open, high, low, close 값을 의미한다. 파이 차트 혹은 gauge에서, 포인트는 하나의 값을 가진다. 

 

포인트 옵션은 모든 타츠에 적용될 수 있다. 아래 예시는 특정 포인트에만 색을 추가하는 코드이다. 

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5,
            { y: 216.4, color: '#BF0B23'}, 194.1, 95.6, 54.4]
}]

line, spline, area 그리고 areaspline 차트는 포인트 마커를 표시할 수 있는 옵션이 있다. 이는 다른 포인트 옵션과는 약간의 차이가 있는데 포인트 마커는 포인트 마커의 스타일과 모양을 변경할 수 있도록 하기 때문이다. 

아래 코드는 포인트의 색깔과 크기를 특정 포인트에서 변경하는 예시이다. 

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5,
    {y: 216.4, marker: { fillColor: '#BF0B23', radius: 10 } }, 194.1, 95.6, 54.4]
}]

 

Series options

시리즈 옵션은 두개의 다른 장소에서 설정할 수 있다. 

  •  다수의 시리즈에 적용되는 일반 옵션은 plotOptions에서 정의된다. 차트의 모든 시리즈에 적용될 일반 옵션을 설정하기 위해선 plotOptions.series를 이용해라. 특정한 차트 타입에 사용될 일반 옵션을 설정하기 위해선, 각 차트 타입은 각자의 plotOptions 컬렉션을 가지고 있어야 한다. 
  •  각각의 시리즈의 특정한 옵션 설정은 시리즈 옵션 스트럭처에서 정의된다. 

아래는 데이터 시리즈에 적용되는 가장 흔한 옵션 개요이다. 

ANIMATION

시리즈의 시작 애니메이션 특성을 없애거나 변경한다. Animation은 기본값으로 enable로 설정되어 있다. 

COLOR

시리즈의 색깔을 바꾼다. 

POINT SELECTION

특정 포인트를 선택하고 하이라이팅할 수 있다. 포인트를 제거하거나 수정 혹은 정보표시를 위해 사용될 수 있다.

point selection을 가능하게 하는 코드:

plotOptions: {
    series: {
        allowPointSelect: true
    }
}

selected points를 얻기위한 코드:

var selectedPoints = chart.getSelectedPoints();

LINE WIDTH

선 너비를 변경할 수 있다.

선 너비 변경을 위한 코드:

series: [{
    data: [216.4, 194.1, 95.6],
    lineWidth: 5}],

STACKING

Stacking은 시리즈들이 겹칩없이 위에 차곡차곡 쌓이도록 설정할 수 있다. 

CURSOR

포인트와 시리즈가 클릭가능함을 알리기 위해 커서의 외형을 변경할 수 있다. 

DATA LABELS

차트의 시리즈 데이터마다 데이터 레이블이 표시되도록 설정할 수 있다. 

datalabels 표시를 위한 코드:

plotOptions: {
    line: {
        dataLabels: {
            enabled: true
        }
    }
},

주의: 마우스를 포인트위에 호버링 하면 시리즈를 하이라이팅 하는 마우스 트래킹을 없애고 싶을 수 있다. 이때 마우스 트래킹을 해제하면 툴팁이 나타나지 않게 된다. 

 

datalabels에 나타나는 텍스트 또한 포멧 옵션을 사용해 커스터마이징 할 수 있다. 

DASH STYLE

실선 대신에 점선을 이용할 수 있도록 한다. 여러가지 점선 옵션이 있다. 

각각의 시리즈에 점선 옵션을 설정하기 위한 코드 (dashStyle은 plotOptions에서도 설정될 수 있다):

series: [{
    data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],
    dashStyle: 'longdash'
}]

ZONES

경우에 따라, 그래프의 특정 영역만을 다르게 표시하고 싶을 수 있다. 가장 흔한 예시는 특정 영역에 따라 다른 색깔을 입히는 것이다. 이는 zones를 이용해 설정할 수 있다. 기본값으로 zoning은 y축으로 설정되지만 시리즈의 zoneAxis 변수 세팅을 바꿔 간단하게 바꿀 수 있다. zoning을 위해선 우선 zones 배열 안에 상응하는 zone마다 value값으로 어느 값까지 zone이 적용되는지 그 한계를 정하는 정의 과정을 거쳐야 한다. 각각의 zone마다 오버라이트 가능한 세팅은 color, fillColor, 그리고 dashStyle이 있다. 

zoning 코드:

zones: [{
    value: 0,
    color: '#f7a35c'
}, {
    value: 10,
    color: '#7cb5ec'
}, {
    color: '#90ed7d'
}]