RealChart v1.5.2 출시. 릴리즈 노트 →
가이드
릴리즈
v1.5.2

v1.5.2

✨ 기능 개선

CSS 변수 적용 범위 변경 [🚨주의]

  • 기존: realchart-style.css의 CSS 변수(--color-1 등)가 :root에도 선언되어 페이지 전체에 노출되었습니다.
  • 변경: .rct-root에만 선언합니다. 차트 표시는 이전과 같습니다.
  • 차트 밖의 HTML에서 var(--color-1) 같은 변수를 쓰고 있었다면 페이지에서 직접 선언해야 합니다.

게이지 기본 색 변경 [🚨주의]

  • 기존: 값 색이 게이지마다 달랐고(circle #0098ff, linear #008000, bullet #333), 그룹 안 게이지는 모두 같은 색이었으며, dark · real 테마에서도 값 · 트랙 · 바늘 · 목표선 색이 라이트 테마와 같았습니다.
  • 변경: 테마별 게이지 전용 6색 팔레트(--rct-gauge-color-1 ~ --rct-gauge-color-6)를 사용합니다. 단독 게이지는 1번 색, 그룹 안 게이지는 순서대로 1~6번 색이고 7번째부터 반복합니다.
  • 값 · 트랙 · 바늘 · 핀 · 목표선 · 라벨 · 시계판이 테마에 맞는 색으로 표시됩니다.
  • bullet 게이지의 목표선과 값 · 목표 라벨에 배경색 테두리가 추가되어 막대 위에서도 잘 보입니다.
  • valueBar.style · valueRim.style로 지정한 색과 사용자 class는 기본 색보다 우선합니다.

Histogram (opens in a new tab) bin 계산 변경 [🚨주의]

같은 데이터라도 아래 설정을 쓰면 bin 개수와 빈도가 이전과 달라질 수 있습니다. 기본 설정(binsNumber: 'squreRoot')의 bin 개수 계산은 같습니다.

데이터포인트 선택 동작 [🚨주의]

  • chart.selection.select · add는 선택할 수 없는 시리즈의 데이터포인트를 무시하고 false를 반환합니다.
  • split 차트에서도 제목 · 축을 클릭하면 일반 차트처럼 선택이 해제됩니다.
  • 터치에서 빈 영역을 tap하면 선택이 해제되고, 빈 영역을 길게 누르면 선택은 유지한 채 툴팁만 닫힙니다.
  • 데이터포인트 라벨 위를 클릭하거나 tap해도 선택이 해제되지 않습니다.

다시 그릴 때 hover · 툴팁 유지

  • 차트를 다시 그려도 그 데이터포인트가 그려져 있으면 hover 표시와 툴팁을 유지합니다. 터치로 고정한 툴팁도 같습니다.
  • 터치로 고정한 툴팁의 말풍선을 tap하거나 길게 눌러도 툴팁이 닫히지 않습니다.

➕ 기능 추가

selection (opens in a new tab) 데이터포인트 선택 설정

  • 선택 관련 옵션을 시리즈의 selection으로 묶어 지정할 수 있습니다. true로 지정하면 선택만 켭니다. Bar, CircleBar, Pie, PictorialBar 시리즈에서 지원합니다.
  • 선택되지 않은 포인트의 스타일을 지정하는 unselectedStyle과 focus 표시 여부를 지정하는 focus.visible이 추가되었습니다.
  • 기존 selectable · selectStyle · focusStyle도 그대로 동작하며, 둘 다 지정하면 selection이 우선합니다. 기존 옵션은 v1.6.0부터 deprecated됩니다.
series: {
  type: 'bar',
  selection: {
    visible: true,
    style: { stroke: '#333' },
    unselectedStyle: { opacity: 0.4 },
    focus: { style: { stroke: '#4F46E5' } }
  }
}

chart.selectAll (opens in a new tab) · chart.unselectAll (opens in a new tab) x값으로 선택 · 해제

  • x값으로 여러 데이터포인트를 한 번에 선택하거나 해제하는 API가 추가되었습니다. selectAll은 기존 선택에 더합니다.
  • unselectAll()처럼 인자를 주지 않으면 전체 선택을 해제합니다.
  • 데이터포인트는 첫 렌더링 때 만들어지므로, 첫 화면에서 고르려면 createChart의 callback 안에서 호출합니다.
chart.selectAll('1월');                                 // 모든 시리즈에서 x가 '1월'인 포인트
chart.selectAll({ sales: ['1월', '3월'], cost: '2월' }); // 시리즈마다 다른 x
chart.unselectAll('1월');
chart.unselectAll();                                    // 전체 해제

자세한 내용은 데이터포인트 선택 가이드 (opens in a new tab)를 참조하세요.

label.overflow (opens in a new tab) 축 라벨 줄바꿈 · 말줄임

  • 선언만 있고 동작하지 않던 축 라벨 overflow가 구현되었습니다. 'wrap'은 여러 줄로 나누고, 'ellipsis'는 한 줄로 두고 말줄임합니다. 기본값 'clip'의 동작은 이전과 같습니다.
  • 최대 폭을 지정하는 maxWidth (opens in a new tab)(@default '33%')와 'wrap'의 최대 줄 수를 지정하는 maxLines (opens in a new tab)(@default 0)가 추가되었습니다.
  • 줄바꿈 · 말줄임한 라벨에 마우스를 올리면 원래 텍스트가 표시됩니다.
xAxis: {
  label: { overflow: 'wrap', maxWidth: 100, maxLines: 2 }
}

scrollBar.wheel (opens in a new tab) 마우스 휠 스크롤

  • true로 지정하면 축이 zoom된 동안 마우스 휠(트랙패드 스크롤 포함)로 표시 범위를 옮길 수 있습니다. (@default false)
  • 스크롤바가 표시되어 있어야 동작합니다. 범위 끝에 닿으면 휠을 막지 않아 페이지가 스크롤됩니다.

scrollBar.opposite (opens in a new tab) 스크롤바 반대편 배치

  • true로 지정하면 스크롤바를 축 쪽이 아니라 plot 영역의 반대편에 표시합니다. (@default false)
  • split 차트에서는 적용되지 않습니다.

label.autoFit (opens in a new tab) circle 게이지 라벨 자동 맞춤

  • true로 지정하면 라벨이 내부 원 반지름의 90%를 벗어날 때 그 안에 들어가도록 줄여서 표시합니다. (@default false)
  • sweepAngle이 180 이하이면 라벨을 원호 쪽 반원 안으로 옮긴 뒤 맞춥니다. 게이지 그룹에 속한 게이지에는 적용되지 않습니다.
  • realchart-gauge 모듈이 필요합니다. guide/modules (opens in a new tab)를 참조하세요.

🐞 버그 수정

seriesNavigator (opens in a new tab)

  • seriesNavigator: true로 지정하거나 로드 뒤 내비게이터를 켜면 렌더가 중단되던 문제가 수정되었습니다.
  • 시리즈가 없거나 첫 시리즈가 숨겨져 있으면 렌더가 중단되던 문제가 수정되었습니다. 소스 시리즈를 숨기면 내비게이터의 시리즈도 함께 숨겨지고, 다른 시리즈로 바뀌지 않습니다.
  • 소스 시리즈의 데이터를 바꿔도 내비게이터에 반영되지 않던 문제가 수정되었습니다.
  • source (opens in a new tab)에 index를 지정하면 무시되던 문제가 수정되었습니다.
  • 자동으로 x를 매긴 소스(categories · xStart · xStep)와 usePointSource 소스에서 내비게이터 x축 라벨이 본 축과 다르던 문제가 수정되었습니다.
  • seriesNavigator.xAxis에 type 없이 다른 설정만 지정하면 linear 축으로 고정되던 문제가 수정되었습니다. 이제 소스 축의 type을 따릅니다.
  • loadOptions · updateOptions로 바꾼 내비게이터 설정이 반영되지 않던 문제가 수정되었습니다.

zoom

  • 첫 렌더링 전에 호출한 axis.zoom이 첫 렌더링을 중단시키던 문제가 수정되었습니다.
  • 드래그 zoom의 폭이 0이거나 zoom()의 범위가 길이 0 · 범위 밖이면 축이 한 점으로 무너져 시리즈가 사라지던 문제가 수정되었습니다. 이제 이런 zoom()은 무시되고 false를 반환합니다.
  • zoom한 상태에서 데이터를 바꾸면 해당 시리즈가 다음 렌더링까지 사라지던 문제가 수정되었습니다.
  • Waterfall 시리즈에서 zoom 범위 안에 표시할 포인트가 없으면 렌더가 중단되던 문제가 수정되었습니다.

축

  • 고유한 x값이 하나뿐인 차트에 x축 범위가 있으면 첫 렌더링이 중단되던 문제가 수정되었습니다.
  • 축 라벨 text에 ${label}과 다른 파라미터를 함께 쓰면 오류가 발생하던 문제가 수정되었습니다.
  • 위쪽 x축과 inverted 차트의 왼쪽 x축에서 스크롤바의 gap이 바깥쪽에 적용되던 문제가 수정되었습니다.

Histogram (opens in a new tab) · BellCurve (opens in a new tab) 시리즈

  • 숫자 binsNumber, 빈 data, 값이 모두 null이거나 zoom 범위 안에 bin이 없을 때 렌더가 중단되던 문제가 수정되었습니다. 잘못된 binsNumber는 기본값으로 계산합니다.
  • Histogram의 값이 모두 같으면 폭 0인 bin이 겹쳐 표시되던 문제가 수정되었습니다. 이제 그 값을 가운데 둔 bin 하나로 표시합니다.
  • data에 json 객체 · 배열 · yField · ChartData 행을 지정하면 Histogram은 렌더가 중단되고 BellCurve는 곡선이 사라지던 문제가 수정되었습니다.
  • BellCurve data의 null이 0처럼 계산되던 문제가 수정되었습니다. null이 있는 데이터는 곡선이 이전과 달라질 수 있습니다.

기타 시리즈

  • stack에서 같은 x의 기준값 아래 값 뒤에 null이 오면 모든 막대 높이가 0이 되던 문제가 수정되었습니다. null은 0으로 누적합니다.
  • Bubble (opens in a new tab)의 z가 모두 0 이하이면 버블 크기와 viewRanges 색이 틀리고, 모두 0이면 렌더가 중단될 수 있던 문제가 수정되었습니다.
  • 세로 linear 축을 쓰는 Heatmap (opens in a new tab) 셀이 그려지지 않던 문제가 수정되었습니다.
  • Ohlc (opens in a new tab)에서 시가 · 고가 · 저가 · 종가가 모두 같은 봉과 단일값 data의 봉이 화면에서 사라지던 문제가 수정되었습니다.

데이터포인트 갱신 · 애니메이션

  • 애니메이션을 켠 채 추가한 포인트가 그려지지 않던 문제가 수정되었습니다.
  • 표시 포인트가 없을 때 포인트 제거 애니메이션에서 오류가 발생하던 문제가 수정되었습니다.
  • 포인트를 지운 뒤 추가한 포인트의 index가 남은 포인트와 겹쳐 같은 색으로 표시되던 문제가 수정되었습니다. 포인트를 지운 뒤에는 index가 목록 위치와 다를 수 있습니다.
  • 값을 갱신할 때마다 이전 값 사본이 해제되지 않아 메모리 사용량이 늘어나던 문제가 수정되었습니다.

데이터포인트 선택 · 라벨 · 툴팁

  • 포인트 라벨 · 툴팁 파라미터의 점 표기에서 중간 경로가 없으면 렌더가 중단되던 문제가 수정되었습니다.
  • PictorialBar를 hover할 때마다 테두리 두께가 쌓이던 문제가 수정되었습니다.
  • Pie에서 hover를 끝낸 뒤 선택 조각의 쌓기 순서가 어긋나던 문제가 수정되었습니다.

split

  • pane 범례에서 시리즈를 숨기면 항목이 범례에서 사라져 다시 켤 수 없던 문제가 수정되었습니다.

게이지

  • 탭이 가려진 상태에서 값 애니메이션이 끝나면 라벨과 값이 중간 값으로 남던 문제가 수정되었습니다.
  • linear · bullet 게이지 항목 라벨이 dark 테마에서도 검정으로 표시되던 문제가 수정되었습니다.
NPM 차트 테스트v1.5.1