모양 및 스타일 설정

SpreadJS를 사용하면 데이터 차트에 다양한 스타일을 적용하여 데이터를 더 쉽게 이해하고 시각적으로 매력적으로 표현할 수 있습니다. 스타일을 적용하면 중요한 정보를 강조하고 전체적인 일관성과 가독성을 높일 수 있습니다.

데이터 차트 패널의 Inspector 탭을 사용하여 데이터 차트의 다양한 모양 및 스타일 설정을 구성할 수 있습니다.

데이터 차트 스타일에는 다양한 구성 옵션이 있으며, 일반적으로 사용되는 설정은 아래와 같습니다.

차트 스타일

차트 스타일 설정은 데이터 차트의 전체적인 시각적 모양을 제어합니다.

사용 가능한 옵션은 선택한 차트 유형에 따라 달라집니다.

일반 모양

속성	설명
색상 팔레트	서로 다른 범례를 구분하기 위한 색상 집합을 선택합니다. 사용 가능한 옵션: Theme, Standard, Custom
그래프 불투명도	차트 데이터 요소의 투명도를 조정합니다.
캔버스 여백	차트 그리기 영역의 여백을 조정합니다.

선 및 기호 설정

(선 기반 차트에서만 사용 가능)

속성	설명
선 색상	계열 선 또는 데이터 요소 테두리의 색상을 설정합니다.
선 종류	선 스타일을 실선 또는 점선으로 설정합니다.
선 두께	계열 선 또는 데이터 요소 테두리의 너비를 설정합니다.
선 모양	직선, 스플라인, 계단형 또는 곡선 스타일 등 계열 선의 렌더링 방식을 정의합니다. 사용 가능한 옵션은 차트 유형에 따라 다릅니다.
기호 표시	데이터 요소에 기호를 표시합니다.
기호 모양	데이터 요소 기호의 모양을 설정합니다.
기호 크기	데이터 요소 기호의 크기를 설정합니다.

참고
선 모양은 계열 선을 렌더링하는 차트 유형에서만 사용할 수 있습니다.
지원되는 옵션은 차트 유형에 따라 다릅니다.
꺾은선형 차트, 영역형 차트, 누적 영역형 차트, 100% 누적 영역형 차트: Default, Spline, Step Left, Step Right, Step Center, Bezier Curve
범위 영역형 차트: Default, Spline, Bezier Curve
레이더 차트 및 채워진 레이더 차트: Default, Spline
현재 선 모양 설정을 지원하지 않는 차트 유형으로 변경하면 해당 차트 유형의 기본 동작으로 렌더링됩니다.

원형 및 도넛형 설정

(원형 계열 차트에서만 사용 가능)

속성	설명
시작 각도	차트의 시작 각도를 설정합니다.
반지름	내부 및 외부 반지름을 설정합니다.
스윕	차트가 차지하는 각도 범위를 설정합니다.
모서리 반지름	데이터 조각의 둥근 모서리 반지름을 설정합니다.

트리맵 머리글 설정

(트리맵 차트에서만 사용 가능)

머리글 표시 여부

속성	설명
머리글 레이블 표시	트리맵의 머리글 레이블을 활성화합니다. 활성화하면 세부 정보, 값 및 레이블 구분자 설정이 머리글 콘텐츠에 적용됩니다.

머리글 콘텐츠 (머리글 레이블 표시 활성화 시 사용 가능)

속성	설명
세부 정보	각 트리맵 머리글에 세부 정보를 표시합니다.
값	각 트리맵 머리글에 값을 표시합니다.
레이블 구분자	머리글 내 레이블 요소 사이의 구분자를 지정합니다.

머리글 텍스트 스타일

속성	설명
글꼴 색상	머리글 텍스트 색상을 설정합니다.
글꼴 패밀리	머리글 글꼴 패밀리를 설정합니다.
글꼴 크기	머리글 글꼴 크기를 설정합니다.
글꼴 스타일	머리글 글꼴 스타일을 설정합니다.
글꼴 굵기	머리글 글꼴 굵기를 설정합니다.

모양

이 설정의 속성은 배경색, 테두리 종류 및 색상과 같은 데이터 차트의 시각적 세부 사항을 조정하여 가독성을 향상시키는 데 유용합니다.

속성	설명
배경색	데이터 차트의 배경색을 설정합니다.
테두리 종류	데이터 차트의 테두리 종류를 실선 또는 점선으로 설정합니다.
테두리 색상	데이터 차트의 테두리 색상을 설정합니다.
테두리 너비	데이터 차트 테두리 선의 너비를 설정합니다.

제목

이 설정의 속성은 차트 제목의 스타일을 사용자 지정하는 데 사용할 수 있습니다. 제목은 차트 데이터를 설명하는 데이터 차트의 텍스트 영역을 의미합니다.

속성	설명
제목 표시	데이터 차트에 제목을 표시할지 여부를 설정합니다.
제목	데이터 차트 제목의 텍스트 내용을 입력합니다.
배경색	데이터 차트 제목 영역의 배경색을 설정합니다.
테두리 색상	데이터 차트 머리글 영역의 테두리 색상을 설정합니다.
테두리 종류	데이터 차트 머리글 영역의 테두리 선 모양을 실선 또는 점선으로 설정합니다.
테두리 너비	데이터 차트 머리글 영역의 테두리 선 너비를 설정합니다.
맞춤	데이터 차트 제목 텍스트의 정렬 방식을 설정합니다.
글꼴 패밀리	데이터 차트 제목 텍스트의 글꼴을 설정합니다.
글꼴 크기	데이터 차트 제목 텍스트의 글꼴 크기를 설정합니다.
글꼴 굵기	데이터 차트 제목 텍스트의 글꼴 굵기를 설정합니다.
글꼴 스타일	데이터 차트 제목 텍스트의 글꼴 스타일을 일반 또는 기울임꼴로 설정합니다.
글꼴 색상	데이터 차트 제목 텍스트의 글꼴 색상을 설정합니다.
안쪽 여백	데이터 차트 머리글 영역의 안쪽 여백을 조정합니다.

데이터 레이블

이 설정의 속성을 사용하면 데이터 레이블을 구성하여 차트에 값을 직접 표시할 수 있어 데이터를 더 명확하고 쉽게 이해할 수 있습니다.

설정	설명
데이터 레이블 표시	데이터 차트에 데이터 레이블 표시를 활성화합니다. 값(Value), 계열(Series), 범주(Category) 속성과 함께 사용해야 합니다.
레이블 구분자	데이터 레이블 내 값, 계열 및 범주 속성 값 사이의 구분자를 설정합니다. 예: 쉼표, 세미콜론, 마침표 등
값	값 필드의 값을 데이터 레이블에 표시할지 여부를 설정합니다.
서식	데이터 레이블에 표시되는 값 필드 값의 서식을 설정합니다.
계열	계열 값을 데이터 레이블에 표시할지 여부를 설정합니다.
범주	범주 값을 데이터 레이블에 표시할지 여부를 설정합니다.
위치	데이터 레이블 위치를 Around 또는 On Slice로 설정합니다.
겹침 숨기기	레이블이 겹치는 경우 일부 레이블을 숨깁니다.
배경색	데이터 레이블의 배경색을 설정합니다.
연결선 표시	데이터 레이블과 데이터 요소 사이의 연결선을 표시할지 여부를 설정합니다.
선 색상	데이터 레이블과 데이터 요소를 연결하는 선의 색상을 설정합니다.
선 너비	데이터 레이블과 데이터 요소를 연결하는 선의 너비를 설정합니다.
최대 선 길이	데이터 레이블과 데이터 요소 사이 선의 최대 길이를 설정합니다. 직교 좌표계에서는 선이 직선이므로 최대 길이만 설정할 수 있습니다.
첫 번째 선 길이	데이터 레이블과 데이터 요소를 연결하는 선의 첫 번째 구간 길이를 설정합니다. 극좌표계에서는 선이 두 구간으로 구성되므로 첫 번째 구간 길이를 설정합니다.
두 번째 선 길이	데이터 레이블과 데이터 요소를 연결하는 선의 두 번째 구간 길이를 설정합니다. 극좌표계에서는 선이 두 구간으로 구성되므로 두 번째 구간 길이를 설정합니다.
글꼴 패밀리	데이터 레이블 텍스트의 글꼴을 설정합니다.
글꼴 크기	데이터 레이블 텍스트 크기를 설정합니다.
글꼴 굵기	데이터 레이블 텍스트 굵기를 설정합니다.
글꼴 스타일	데이터 레이블 텍스트 스타일을 일반 또는 기울임꼴로 설정합니다.
글꼴 색상	데이터 레이블 텍스트 색상을 설정합니다.

도구 설명

이 설정의 속성은 사용자가 차트 영역 위에 마우스를 올렸을 때 표시되는 도구 설명을 활성화하고 스타일을 지정하는 데 사용됩니다.

설정	설명
도구 설명 표시	데이터 바인딩 패널의 도구 설명 콘텐츠를 표시하거나 숨깁니다. 기본적으로 데이터 차트는 값을 도구 설명으로 표시합니다.
스타일 설정	다음 도구 설명 스타일을 사용자 지정합니다: 배경색 테두리 색상 테두리 너비 글꼴 색상 글꼴 패밀리 글꼴 크기 글꼴 굵기 취소선 윗줄 밑줄

설정

설명

도구 설명 표시

데이터 바인딩 패널의 도구 설명 콘텐츠를 표시하거나 숨깁니다. 기본적으로 데이터 차트는 값을 도구 설명으로 표시합니다.

스타일 설정

다음 도구 설명 스타일을 사용자 지정합니다:

배경색
테두리 색상
테두리 너비
글꼴 색상
글꼴 패밀리
글꼴 크기
글꼴 굵기
취소선
윗줄
밑줄

축

이 설정의 속성은 범주(X축) 및 값(Y축)을 사용자 지정하여 데이터에 적합한 눈금, 간격 및 서식을 정의하는 데 유용합니다.

설정	설명
축 표시	데이터 차트에 범주 축 및 값 축을 표시할지 여부를 설정합니다.
축 위치	데이터 차트 축의 위치를 설정합니다.
축 선 표시	데이터 차트 축 선을 표시합니다.
축 선 너비	데이터 차트 축 선의 너비를 설정합니다.
축 선 색상	데이터 차트 축 선의 색상을 설정합니다.
축 선 종류	데이터 차트 축 선의 종류를 설정합니다.
눈금선 표시	데이터 차트 축 방향의 눈금선을 표시합니다.
눈금선 너비	눈금선의 너비를 설정합니다.
눈금선 색상	눈금선의 색상을 설정합니다.
눈금선 종류	눈금선의 종류를 설정합니다.
눈금 표시	축의 눈금을 표시합니다.
눈금 레이블 표시	축 눈금 레이블을 표시합니다.
레이블 방향	축 눈금 레이블의 표시 방향을 설정합니다.
레이블 넘침 설정	축 눈금 레이블이 넘칠 경우 Clip, Ellipsis 또는 Wrap 방식으로 표시합니다.
제목 표시	축 이름을 표시합니다.
글꼴 패밀리	축 텍스트의 글꼴을 설정합니다.
글꼴 크기	축 텍스트의 크기를 설정합니다.
글꼴 굵기	축 텍스트 굵기를 Lighter, Normal 또는 Bold로 설정합니다.
글꼴 스타일	축 텍스트 스타일을 일반 또는 기울임꼴로 설정합니다.
글꼴 색상	축 텍스트 색상을 설정합니다.
최대값	값 축의 최대 눈금을 설정합니다.
최소값	값 축의 최소 눈금을 설정합니다.
간격	값 축 눈금 간격을 설정합니다.
역순	값 축을 역순으로 표시합니다.
축 위치	값 축의 표시 위치를 설정합니다.
서식	값 축 레이블 데이터의 서식을 설정합니다.
표시 단위	값 축 레이블 데이터의 단위를 설정합니다.
아래 설정은 Bubble 및 Scatter 데이터 차트에서만 사용할 수 있습니다.
눈금 유형	축의 눈금 유형을 설정합니다. 예: Date
날짜 모드	날짜 간격 단위를 설정합니다. 예: 연도, 월, 일 등
주 눈금 간격	날짜 모드와 함께 사용하는 주 눈금 간격을 설정합니다.
보조 눈금 간격	날짜 모드와 함께 사용하는 보조 눈금 간격을 설정합니다.

범례

이 설정의 속성을 사용하면 데이터를 효과적으로 표현하기 위해 범례 스타일을 관리할 수 있습니다.

설정	설명
범례 표시	데이터 차트에 범례를 표시합니다.
제목	데이터 차트 범례 제목을 표시합니다.
글꼴 패밀리	범례 텍스트의 글꼴을 설정합니다.
글꼴 크기	범례 텍스트 크기를 설정합니다.
글꼴 굵기	범례 텍스트 굵기를 lighter, normal 또는 bold로 설정합니다.
글꼴 스타일	범례 텍스트 스타일을 일반 또는 기울임꼴로 설정합니다.
글꼴 색상	범례 텍스트 색상을 설정합니다.
위치	범례 위치를 위쪽, 아래쪽, 오른쪽 또는 왼쪽으로 설정합니다.
자동 크기	범례 영역 크기를 자동으로 조정합니다.
가로 맞춤	데이터 차트에서 범례의 가로 정렬을 설정합니다.
세로 맞춤	데이터 차트에서 범례의 세로 정렬을 설정합니다.
범례 자동 줄 바꿈	범례 항목이 많을 경우 자동으로 줄 바꿈합니다.

레이아웃

이 설정의 속성은 차트 레이아웃을 구성하여 시각적 명확성을 향상시키는 데 필요합니다.

설정	설명
X 위치	데이터 차트의 현재 X 위치 정보를 설정합니다.
Y 위치	데이터 차트의 현재 Y 위치 정보를 설정합니다.
너비	데이터 차트의 너비를 설정합니다.
높이	데이터 차트의 높이를 설정합니다.

애니메이션

이 설정의 속성은 데이터 표현에 부드러운 애니메이션 효과를 추가하여 사용자 경험을 향상시키는 데 도움이 됩니다.

설정	설명
마우스 오버 애니메이션 표시	데이터 요소 위에 마우스를 올릴 때 애니메이션을 표시합니다.
업데이트 애니메이션 표시	데이터 차트 설정이 변경될 때 애니메이션을 표시합니다.