고성능 JavaScript 차트 및 그래프 라이브러리

주석 API의 기능

주석을 사용하면 Xy 좌표 또는 상대 좌표(%)를 사용하여 차트 위에 원하는 도형, 마커, 텍스트 또는 선을 배치할 수 있습니다.

• 주석(마커)의 종류
  • LineAnnotation
  • BoxAnnotation
  • TextAnnotation (텍스트 / 레이블)
  • VerticalLineAnnotation (드래그 가능한 축 마커가 있는 선)
  • HorizontalLineAnnotation(드래그 가능한 축 마커가 있는 선)
  • AxisMarkerAnnotation(축 위의 텍스트 또는 이미지)
  • CustomAnnotation(차트 위에 배치된 임의의 SVG 도형)
  • [NEW] ArcAnnotation(직교 좌표 또는 극좌표 차트상의 원호)
  • [NEW] PolarPointerAnnotation(게이지용 포인터)
• 어노테이션 배치 API
  • Xy 데이터 값을 이용한 절대 배치, SciChart가 위치를 자동으로 업데이트
  • 상대 배치 (예: 상단 5%, 좌측 10%)
  • 픽셀 단위 배치 (예: 상단: 20px, 좌측: 40px)
  • 시리즈 위 또는 아래(배경으로) 배치
• 주석 상호작용 API
  • 마우스로 드래그/크기 조정 (옵션)
  • 드래그 및 크기 조정 시 이벤트 (콜백)
  • 표시/숨기기 (가시성 변경)

주석 문서 참조

Animations API의 기능

• 시리즈 시작 애니메이션
  • 초기 로드 시 적용되는 4가지 애니메이션
  • 웨이브, 스윕, 페이드, 스케일
  • 지연, 지속 시간 및 이징 함수 사용자 지정
• 스타일 전환 애니메이션
  • 그래프 시리즈에서 스타일 전환 애니메이션 적용
  • 선 두께, 선 색상, 채우기 애니메이션
  • 포인트 마커 스타일 애니메이션화
  • 마우스 오버 또는 선택 시 스타일을 애니메이션화하는 데 사용할 수 있습니다
  • 지연, 지속 시간 및 이징 함수 사용자 지정
• 데이터 세트 애니메이션
  • 한 데이터 세트에서 다른 데이터 세트로 애니메이션을 적용하는 데 사용할 수 있습니다
  • 모든 Xy 시리즈의 점은 데이터 세트 A에서 B로 보간됩니다
  • 스타일 애니메이션과 함께 사용할 수 있습니다
  • 지연, 지속 시간, 이징 함수 사용자 지정
• 일반적인 애니메이션
  • 차트상의 DOM 요소, 마커, 오버레이 등 말 그대로 모든 요소를 애니메이션화할 수 있습니다
  • axis.visibleRange의 변경을 애니메이션화하여 확대/축소 및 이동을 제어합니다
  • 지연, 지속 시간 및 이징 함수 사용자 지정

애니메이션 문서 참조

Axis API의 기능

• 축 배치
  • 차트의 좌측, 우측, 상단, 하단에 X축과 Y축을 무제한으로 여러 개 배치 가능
  • 축을 차트 내부, 외부 또는 중앙에 배치 가능
  • 석유·가스 업계용 차트 회전(세로형 차트)
  • 축의 세로 또는 가로 중첩 레이아웃
• 축 제목, 레이블
  • 축 제목 및 축 레이블 서식 설정 사용자 지정
  • 확대/축소 시 레이블 서식 설정을 동적으로 조정
  • 회전된 축 레이블 및 이미지 레이블 지원
  • 레이블의 과학 표기법 또는 공학 표기법(예: 1.23E5 또는 1.23⁵) 지원
• 축 스타일 설정 및 구성
  • 격자선, 눈금, 레이블, 띠의 표시/숨김 전환 가능
  • TickProvider를 사용하여 축의 격자 간격을 정밀하게 설정 가능
  • 축의 경계선, 배경, 격자선, 눈금, 레이블의 스타일 설정
• 축의 기타 API
  • 특정 축의 자동 범위 설정(데이터 자동 조정)
  • 축의 표시/숨김 전환, 또는 동적으로 축 추가/삭제
  • 연결된 차트 간 축 크기 동기화
  • 프로그래밍을 통한 축의 픽셀-데이터 변환 API
  • axis.visibleRange를 프로그래밍으로 설정·획득하거나, 범위 변경 시 알림 받기

축 문서 참조

축의 종류

• 수치 축
  • 정수, 부동 소수점 수
  • 소수점 이하 자릿수 및 레이블 형식의 접두사/접미사를 사용자 정의하기
  • 값 축 유형(X값을 이용한 측정)
• DateTimeNumericAxis
  • Unix 타임스탬프를 날짜로 표시하는 NumericAxis의 하위 유형
  • 기본으로 제공되는 날짜 및 시간 표시 형식 중에서 선택할 수 있습니다
  • 확대 시 날짜 및 시간 표시 형식을 동적으로 변경하여 세부 정보를 표시합니다
• 로그 축
  • 정수, 부동 소수점
  • Log2, LogE, Log10 지원
  • 과학 표기법 또는 공학 표기법(예: 1.23E5 또는 1.23⁵)
  • 주요 격자선은 로그 스케일을 따릅니다
  • 세부 눈금선은 선형 또는 로그 스케일을 따릅니다
• 범주 축
  • X-인덱스를 사용한 특수한 X축 유형 측정
  • 데이터의 누락된 부분을 보완하는 데 사용할 수 있습니다
  • 소수점 이하 자릿수 및 레이블 서식 사용자 지정
  • Unix 타임스탬프를 날짜 형식으로 변환
• [NEW] PolarNumericAxis
  • 극좌표 그래프의 정수 및 실수 값
• [NEW] 극좌표축
  • 극좌표 그래프에서 X 인덱스를 사용한 특수한 X축 측정 방법

「축의 종류」 문서 참조

차트·시리즈 API

• 모든 2D 차트 유형 및 극좌표 지원
  • Y=NAN에 의한 시리즈 내 갭
  • Y=NAN에 의한 시리즈 내 닫힌 선
  • 포인트별 색상 지정을 위한 PaletteProvider API
  • 시리즈 표시/숨기기
  • 시리즈 선택/선택 해제
  • 데이터 레이블
  • 메타데이터(Xy 좌표상의 JS 객체)
  • 히트 테스트(마우스가 좌표 위에 있는지 여부를 판정하는 프로그램 API)
• 모든 3D 차트 유형 지원
  • 메타데이터(Xy 좌표상의 JS 객체)
  • 히트 테스트(마우스가 좌표 위에 있는지 확인하는 프로그램 API)
  • 각 좌표별 채색을 위한 정점 채색

차트 시리즈 관련 문서 참조

커서/툴팁 기능

• 커서 편집
  • 마우스 조작에 따라 움직이는 십자선 (옵션으로 세로선·가로선 표시 가능)
  • 십자선 위의 축 레이블 (옵션)
  • 십자선 옆에 표시되는, 설정 가능한 툴팁(옵션)
  • 시리즈의 데이터 포인트에 커서를 올리면, 옵션으로 설정된 활성 범례가 표시됨
• 롤오버 수정자
  • 마우스 움직임을 추적하는 수직선
  • 호버 지원 트랙볼 및 활성 툴팁
  • 수직선 옆에 표시되는, 설정 가능한 툴팁(옵션)
• VerticalSliceModifier
  • 데이터를 분할하는 수직선을 드래그하여 배치합니다
  • 선은 데이터와 시계열이 교차하는 지점에 툴팁을 표시합니다
• 툴팁 관련 각종 API
  • 마우스 오버 시 툴팁 내용을 사용자 정의할 수 있습니다
  • Y축에 최신 시리즈 값을 표시합니다
  • 템플릿화 가능한 활성 차트의 범례
  • 비즈니스 객체(메타데이터)를 툴팁에 전달합니다
  • 애플리케이션 스타일에 맞춰 툴팁을 사용자 정의합니다

「커서/툴팁」 문서 참조

DataLabels API의 기능

• 고정 WebGL Xy 데이터 포인트 레이블
  • 내장 데이터 레이블은 Xy 좌표상의 데이터 포인트에 배치할 수 있습니다
  • WebGL을 사용하여 레이블을 렌더링함으로써 수천 개의 레이블에서도 뛰어난 성능을 구현합니다
• 데이터 레이블 서식 지정
  • 숫자 정밀도 및 텍스트 서식 지정 규칙에 따라 데이터 레이블을 서식 지정합니다
  • 데이터 포인트의 위나 아래에 라벨을 표시합니다
  • 사용자 정의 다중 행 라벨은 데이터 포인트의 X, Y 또는 메타데이터를 출력합니다
• 데이터 레이블 필터링
  • 스킵 모드/커링 모드는 중복되는 데이터 레이블을 감지하여 숨깁니다
  • 데이터 레이블 표시/숨기기 전환

DataLabels 문서 참조

데이터 API 기능

• 동적 데이터 업데이트
  • Append, Insert, Update, Remove, Clear 함수를 사용하여 데이터를 동적으로 업데이트
  • 오래된 데이터를 스크롤하거나 삭제하기 위한 내장 FIFO(선입선출) 모드
  • 심전도/랩어라운드 차트용 내장 스윕 모드
  • 고성능 애플리케이션을 위한 대량 업데이트 지원
• 데이터 형식
  • 빅데이터 및 고성능이 요구되는 애플리케이션을 위해 최적화된 데이터 구조
  • Xy 좌표를 JS 객체로 태그 지정하여 해당 좌표에 메타데이터를 표시할 수 있게 합니다
  • 파이프라인 전체에서 Float64의 완전한 정밀도를 지원합니다
  • Unix 타임스탬프를 통한 날짜 및 시간 지원
• 반응형 JavaScript 차트
  • 속성이나 데이터가 변경될 때 그래프를 다시 그리며, 그래프가 자동으로 업데이트되도록 합니다

DataSeries 문서 참조PointMetadata API 문서 참조

문서 및 도움말 리소스

• 문서
  • 수백 페이지에 달하는 수작업으로 작성된문서 페이지
  • 많은 문서에 CodePen이 포함되어 있어 브라우저에서 복사하여 편집할 수 있습니다
  • GitHub에 공개된 모든 문서 예제의 소스 코드
• 시작하기: 리소스
  • 시작하기 가이드
  • 소스 코드가 포함된 100개 이상의 예제／데모
  • npm 개발자를 위한동영상 튜토리얼
  • vanilla JS 개발자용 튜토리얼
  • 라이브러리 전체 Typedoc
  • 주요 프레임워크(React, Vue, Angular)용 표준 데모
  • 공식 scichart-react React 컴포넌트
• 지속적 배포
  • npm 및 JSDelivr에 정기적으로 공개하며, 적극적으로 개발이 진행되고 있습니다
  • 온라인 변경 내역
• 도움말 및 지원
  • 커뮤니티 게시판
  • 프리미엄 회원 전용 지원 데스크

‘시작하기’ 리소스 보기

Filters API의 기능

• 렌더링 전 데이터의 변환 및 가공
  • 필터를 사용하면 데이터 시계열을 함수나 변환과 연쇄적으로 연결할 수 있습니다
  • 기본 데이터가 업데이트되면 필터가 재계산됩니다
• 내장 필터
  • 시리즈 및 그래프의 확대/축소 및 오프셋(선형 변환)
  • 직선 추세선
  • 이동 평균
  • 비율(시리즈 A/B)
  • 스플라인 보간
• 사용자 정의 필터
  • 사용자 정의 함수 생성
  • 필터부터 집계까지 모든 것이 대상입니다
  • 데이터를 즉시 변환합니다

「Filters API」 문서 참조

멀티 차트 링크 API의 기능

• 멀티 차트
  • 차트는

    내에 생성됩니다

  • WebGL 컨텍스트 제한에 걸리지 않고, 웹 페이지에서 무제한으로 차트를 표시합니다
  • 그룹 내의 여러 차트를 동기화합니다
  • 확대/축소 및 이동을 동기화합니다
  • 커서와 툴팁을 동기화합니다
  • 축 크기를 동기화합니다
• 서브 차트
  • 서브 차트 API – 성능 향상을 위해 동일한 캔버스 상에 차트를 그룹화
  • 복잡한 시각화 가능 – 차트 내의 차트

‘차트 링크’ 문서 참조

Retina 디스플레이 지원 및 DPI 기능

• 모니터 DPI 지원
  • MacBook Retina 지원
  • Windows 고해상도 DPI 지원
  • 고해상도 디스플레이에서는 선, 스트로크, 도형이 더욱 선명하고 또렷하게 표시됩니다
  • 텍스트는 더 높은 해상도로 표시됩니다
• 브라우저 줌 지원
  • 브라우저 줌 기능 (Ctrl + 마우스 휠)
  • 텍스트는 브라우저 확대/축소에 맞춰 확대 및 축소됩니다(접근성 확보를 위해)
  • 브라우저의 확대 비율에 따라 획의 굵기(선폭)가 증가합니다

이 DPI Docs

직렬화 / 빌더 API의 기능

• 개발자를 위한 API 선택
  • SciChart.js에는 2가지 API가 포함되어 있습니다
  • 프로그래밍 API를 사용하면 코드를 통해 차트를 생성할 수 있습니다
  • JSON Builder API를 사용하면 JSON이나 JavaScript 객체를 통해 차트를 정의할 수 있습니다
• JSON Builder API
  • 차트 전체를 코드나 JSON/JavaScript 객체 중 하나로 정의합니다
  • 축, 계열, 레이아웃 등 차트의 구성 요소만 정의합니다
  • 데이터를 JSON에 통합하거나 나중에 전송하십시오
  • JSON을 사용하여 차트를 생성한 후, 코드 내에서 해당 차트를 조작할 수 있습니다
• 직렬화
  • 차트 및 차트의 일부를 JSON 형식으로 직렬화합니다
  • JSON에서 차트 및 차트 부품을 역직렬화합니다

직렬화 문서 참조

Selection API의 기능

• 시리즈 선택 및 편집
  • 마우스 또는 프로그램을 통해 시리즈 선택하기
  • 시리즈 선택 시/마우스 오버 시 이벤트/콜백
  • 시리즈를 선택하거나 마우스를 올렸을 때 스타일이나 상태를 변경합니다
• 데이터 포인트 선택 및 편집
  • 마우스 또는 프로그램을 사용하여 개별 데이터 포인트를 선택합니다
  • 단일 선택 또는 다중 선택을 지원합니다
  • 데이터 포인트 선택 시 이벤트/콜백
  • 선택한 데이터 포인트 목록 가져오기
  • 선택한 데이터 포인트의 모양 변경하기
• 히트 테스트 API
  • 마우스에 가장 가까운 점을 가져오기 / Hit-Test API를 사용하여 포인트 위에 있는지 확인하기
  • ChartModifier API와 함께 사용하여 MouseDown, MouseMove, MouseUp, Touch를 오버라이드하고 차트에서 독자적인 동작을 구현합니다

「선택 문서」 참조히트 테스트 문서 참조

Theme API의 기능

• 선택 가능한 3가지 멋진 테마
  • 테마의 색상 팔레트를 기반으로 시리즈 색상을 자동 생성
  • 사용자 지정 테마를 쉽게 생성
  • 내장 테마를 상속하고 일부 속성을 변경합니다
• 스타일링 및 사용자 지정
  • 코드 내에서 스타일을 재정의합니다(예: 배경색, 격자선, 텍스트 색상, 계열의 선 및 채우기)
  • 투명한 배경 지원
  • 그래프의 각 요소(시리즈, 축, 레이블, 범례, 눈금선) 표시/숨기기 전환
  • 차트 컴포넌트, RenderableSeries, 툴팁, 범례 등의 스타일링
• 모던한 스타일로 멋진 그래프를 만들어 보세요!

‘테마’ 문서 참조

접근성 API의 기능

• 시각적 접근성
  • SpeechSynthesisUtterance / Web Speech API를 통한 VoiceOver를 지원합니다
  • 데이터 포인트에 VoiceOver 추가하기
  • 축 레이블에 VoiceOver 추가하기
  • ‘테마’ 설정에서 색상 및 대비를 변경할 수 있습니다
• 키보드 조작
  • 「+/-」키를 이용한 스크롤 등, 독자적인 키보드 조작을 생성합니다
• 기타
  • 글꼴 및 시리즈 확대/축소 기능을 통한 브라우저 줌에 대응합니다

‘테마’ 문서 참조

줌/팬 API의 기능

• 내장 줌 및 팬 동작
  • RubberBandXyZoomModifier: 사각형을 드래그하여 줌 애니메이션 실행
  • X/YAxisDragModifier: 축 드래그를 통한 팬 또는 줌
  • MouseWheelZoomModifier: 마우스 휠을 통한 팬 또는 줌
  • PinchZoomModifier: 핀치 줌을 포함한 터치스크린 지원
  • ZoomExtentsModifier: 더블 클릭으로 줌 범위를 애니메이션으로 표시
  • ZoomPanModifier: 마우스 드래그를 통한 수평 또는 수직 방향의 팬. 핀치 줌도 지원
• 기타 줌/팬 API
  • 스크롤바 및 개요 표시 컨트롤
  • 프로그램을 통한 axis.visibleRange 가져오기/설정 또는 애니메이션화
  • 프로그램을 통한 팬 및 확대/축소 수행 API
  • 사용자 지정 마우스 조작 확장 기능 개발을 위한 강력한 ChartModifier API

ChartModifier 문서 참조