모양 및 스타일 설정
SpreadJS는 데이터 차트에 다양한 스타일을 적용할 수 있어 차트를 보다 이해하기 쉽고 시각적으로 매력적으로 만듭니다. 스타일 적용은 중요한 정보를 강조하고 전체적으로 명확하고 일관된 표현을 유지하는 데에도 도움이 됩니다.
데이터 차트 패널의 속성(Inspector) 탭을 사용하면 데이터 차트의 다양한 외관 및 스타일 설정을 할 수 있습니다.
데이터 차트 스타일을 위한 여러 구성 설정이 있으며, 그중 일부 일반적인 설정은 아래와 같습니다.
차트 스타일
이 설정의 속성들은 데이터 차트의 전체적인 외관과 느낌을 설정하는 데 도움을 줍니다.
속성 | 설명 |
|---|---|
색상 팔레트 | 데이터 차트에서 서로 다른 범례를 구분하기 위해 색상 세트를 선택합니다. 사용 가능한 옵션은 다음과 같습니다:
|
그래프 불투명도 | 데이터 차트 데이터 포인트의 투명도를 조절합니다. |
선 색상 | 데이터 포인트 테두리의 색상을 설정합니다. |
선 유형 | 데이터 포인트 테두리의 선 유형을 실선 또는 점선으로 설정합니다. |
선 두께 | 데이터 포인트 테두리 선의 두께를 설정합니다. |
자동 범주 너비 | 데이터 포인트의 너비와 간격을 설정합니다. 이 속성은 범주 너비와 시리즈 간격 속성의 사용 여부를 결정합니다. |
범주 너비 | 범주 항목의 너비를 설정합니다. |
시리즈 간격 | 범주 항목 내 데이터 포인트 간의 간격을 설정합니다. |
캔버스 여백 | 데이터 차트 그리기 영역의 여백을 사용자 지정합니다. |
모서리 반경 | 데이터 포인트의 둥근 모서리 반지름을 설정합니다. |
시작 각도 | 데이터 포인트의 시작 각도를 설정합니다. |
반지름 | 원형 차트의 내부 반지름과 외부 반지름을 설정합니다. |
회전 범위 | 원형 차트가 차지하는 라디안(radian) 값을 설정합니다. |
선 스타일 | 연결선의 유형을 설정합니다. 사용 가능한 옵션은 다음과 같습니다:
|
기호 표시 | 연결점에 기호를 표시하도록 설정합니다. |
기호 모양 | 연결점 기호의 모양을 설정합니다. |
기호 크기 | 연결점 기호의 크기를 설정합니다. |
모양
이 설정의 속성들은 데이터 차트의 배경 색상, 테두리 유형 및 색상 등 시각적 세부 사항을 조정하는 데 유용하며, 이를 통해 가독성을 향상시킬 수 있습니다.
속성 | 설명 |
|---|---|
배경 색상 | 데이터 차트의 배경색을 설정합니다. |
테두리 유형 | 데이터 차트의 테두리 유형을 실선 또는 점선으로 설정합니다. |
테두리 색상 | 데이터 차트의 테두리 색상을 설정합니다. |
테두리 너비 | 데이터 차트의 테두리 선 두께를 설정합니다. |
제목
이 설정의 속성들은 차트 제목의 스타일을 사용자 지정하는 데 사용됩니다. 제목은 데이터 차트에 표시되어 차트 데이터를 설명하는 텍스트 필드를 의미합니다.
속성 | 설명 |
|---|---|
제목 표시 | 데이터 차트에 제목을 표시할지 여부를 설정합니다. |
제목 | 데이터 차트 제목의 텍스트 내용을 입력합니다. |
배경 색상 | 데이터 차트 제목 영역의 배경색을 설정합니다. |
테두리 색 | 데이터 차트 제목 영역의 테두리 색상을 설정합니다. |
테두리 유형 | 데이터 차트 제목 영역의 테두리 선 모양을 실선 또는 점선으로 설정합니다. ChatGPT에게 묻기 |
테두리 두께 | 데이터 차트 제목 영역 테두리의 선 두께를 설정합니다. |
정렬 | 데이터 차트 제목 텍스트 내용의 정렬 방식을 설정합니다. |
글꼴 종류 | 데이터 차트 제목 텍스트의 글꼴을 설정합니다. |
글꼴 크기 | 데이터 차트 제목 텍스트 글꼴의 크기를 설정합니다. |
글꼴 두께 | 데이터 차트 제목 텍스트 글꼴의 굵기를 설정합니다. |
글꼴 스타일 | 데이터 차트 제목 텍스트 글꼴 스타일을 보통 또는 기울임꼴로 설정합니다. |
글꼴 색상 | 데이터 차트 제목 텍스트 글꼴의 색상을 설정합니다. |
여백 | 데이터 차트 제목 영역의 여백을 조절합니다. |
데이터 레이블
이 설정의 속성들은 데이터 레이블을 구성하여 차트에 값을 직접 표시할 수 있게 해주어, 데이터를 보다 명확하고 쉽게 이해할 수 있도록 돕습니다.
설정 | 설명 |
|---|---|
데이터 레이블 표시 | 데이터 차트에 데이터 레이블 표시를 활성화합니다. 이 기능은 값(Value), 계열(Series), 범주(Category) 속성과 함께 사용해야 합니다. |
레이블 구분자 | 데이터 레이블에서 값(Value), 계열(Series), 범주(Category) 속성 값들 사이에 들어갈 구분자(separator)를 설정합니다. 예를 들어, 쉼표(,), 세미콜론(;), 마침표(.) 등이 있습니다. |
값 | 데이터 레이블에 값(Value) 필드의 값이 표시될지 여부를 설정합니다. |
형식 | 데이터 레이블에서 값(Value) 필드의 값 형식을 설정합니다. |
계열 | 데이터 레이블에 계열(Series) 값이 표시될지 여부를 설정합니다. |
범주 | 데이터 레이블에 범주(Category) 값이 표시될지 여부를 설정합니다. |
위치 | 데이터 레이블의 위치를 ‘바깥쪽 끝에’ 또는 ‘가운데’로 설정합니다. |
겹침 숨기기 | 레이블이 겹칠 경우 일부 레이블을 숨기도록 설정합니다. |
배경 색상 | 데이터 레이블의 배경색을 설정합니다. |
연결선 표시 | 데이터 레이블과 데이터 포인트 사이에 연결선을 표시할지 여부를 설정합니다. |
선 색 | 데이터 레이블과 데이터 포인트를 연결하는 선의 색상을 설정합니다. |
선 두께 | 데이터 레이블과 데이터 포인트를 연결하는 선의 두께를 설정합니다. |
최대 선 길이 | 데이터 레이블과 데이터 포인트를 연결하는 선의 최대 길이를 설정합니다. 직교 좌표계(Cartesian coordinate system)에서는 이 선이 직선이기 때문에 최대 길이만 설정할 수 있습니다. |
첫 번째 선 길이 | 데이터 레이블과 데이터 포인트를 연결하는 선의 첫 번째 구간 길이를 설정합니다. 극좌표계(Polar coordinate system)에서는 이 선이 두 구간으로 이루어져 있어, 첫 번째 구간의 길이를 이곳에서 설정합니다. |
두 번째 선 길이 | 데이터 레이블과 데이터 포인트를 연결하는 선의 두 번째 구간 길이를 설정합니다. 극좌표계(Polar coordinate system)에서는 이 선이 두 구간으로 이루어져 있어, 두 번째 구간의 길이를 이곳에서 설정할 수 있습니다. |
글꼴 종류 | 데이터 레이블의 텍스트에 글꼴을 설정하세요. |
글꼴 크기 | 데이터 레이블의 텍스트 크기를 설정하세요. |
글꼴 두께 | 데이터 레이블의 텍스트 굵기를 설정하세요. |
글꼴 스타일 | 데이터 레이블의 텍스트 스타일을 보통 또는 기울임꼴로 설정하세요. |
글꼴 색상 | 데이터 레이블의 텍스트 색상을 설정하세요. |
툴팁
이 설정의 속성들은 툴팁을 활성화하고 스타일을 지정하여 사용자가 특정 차트 영역 위에 마우스를 올렸을 때 상호작용형 데이터 세부 정보를 제공합니다.
설정 | 설명 |
|---|---|
툴팁 표시 | 데이터 바인딩 패널에서 툴팁 내용을 표시하거나 숨깁니다. 기본적으로 데이터 차트는 값을 툴팁으로 표시합니다. |
스타일 설정 | 다음 툴팁 스타일을 사용자 지정합니다:
|
축
이 설정의 속성은 범주(X축)와 값(Y축)을 사용자 정의할 때, 데이터셋에 맞는 척도, 간격 및 서식을 정의하는 데 유용합니다.
설정 | 설명 |
|---|---|
축 표시 | 데이터 차트에 카테고리와 값 축을 표시할지 설정하세요. |
축 위치 | 데이터 차트의 축 위치를 설정하세요. |
축 선 표시 | 데이터 차트 축의 축선을 표시하도록 설정하세요. |
축 선 너비 | 데이터 차트 축의 선 너비를 설정하세요. |
축 선 색상 | 데이터 차트 축의 선 색상을 설정하세요. |
축 선 유형 | 데이터 차트 축의 축 선 유형을 설정하세요. |
주 눈금선 표시 | 데이터 차트 축 방향으로 그리드 선을 표시하도록 설정하세요. |
주 눈금선 너비 | 눈금선의 너비를 설정하세요. |
주 눈금선 색상 | 눈금선의 색상을 설정하세요. |
주 눈금선 유형 | 눈금선의 선 유형을 설정하세요. |
보조 눈금 표시 | 눈금 표시를 표시하도록 설정하세요. |
눈금 레이블 표시 | 눈금 레이블을 표시하도록 설정하세요. |
레이블 각도 | 눈금 레이블 표시 방향을 설정하세요. |
레이블 오버플로 설정 | 레이블이 넘칠 때 표시 방식을 잘라내기, 생략부호 또는 줄 바꿈으로 설정하세요. |
제목 표시 | 축의 제목을 표시하도록 설정하세요. |
글꼴 종류 | 축의 텍스트 글꼴을 설정하세요. |
글꼴 크기 | 축의 텍스트 크기를 설정하세요. |
글꼴 두께 | 축의 텍스트 굵기를 가볍게, 보통 또는 굵게 설정하세요. |
글꼴 스타일 | 축의 텍스트 스타일을 보통 또는 기울임꼴로 설정하세요. |
글꼴 색상 | 축의 텍스트 색상을 설정하세요. |
최대 값 | 값(axis)의 최대 척도를 설정하세요. |
최소 값 | 값(axis)의 최소 척도를 설정하세요. |
보조 간격 | 값(axis) 척도의 간격을 설정하세요. |
뒤집기 | 반전된 값(axis)을 표시하도록 설정하세요. |
축 위치 | 값(axis)의 표시 위치를 설정하세요. |
형식 | 값(axis)의 레이블 데이터 형식을 설정하세요. |
표시 단위 | 값(axis)에서 레이블 데이터의 크기를 설정하세요. |
아래 설정은 '거품형' 및 '분산형' 유형의 데이터 차트에서만 사용할 수 있습니다. | |
척도 | 축의 척도 유형을 설정하세요. 예: '날짜'로 설정할 수 있습니다. |
날짜 모드 | 날짜의 간격 단위를 설정하세요. 예: 연도, 월, 일 등. |
주 간격 | ‘날짜 모드’와 함께 사용되는 주요 척도의 간격을 설정하세요. |
보조 간격 | ‘날짜 모드’와 함께 사용되는 부차적(보조) 척도의 간격을 설정하세요. |
범례
이 설정의 속성을 사용하여 데이터를 효과적으로 표시하기 위해 범례 스타일을 관리할 수 있습니다.
설정 | 설명 |
|---|---|
범례 표시 | 데이터 차트에서 범례를 표시하도록 설정하세요. |
제목 표시 | 데이터 차트 범례의 제목을 표시하도록 설정하세요. |
글꼴 종류 | 범례의 텍스트 글꼴을 설정하세요. |
글꼴 크기 | 범례의 텍스트 크기를 설정하세요. |
글꼴 두께 | 범례의 텍스트 굵기를 가볍게, 보통, 또는 굵게 설정하세요. |
글꼴 스타일 | 범례의 텍스트 스타일을 보통 또는 기울임꼴로 설정하세요. |
글꼴 색상 | 범례의 텍스트 색상을 설정하세요. |
위치 | 범례의 표시 위치를 위, 아래, 오른쪽, 또는 왼쪽으로 설정하세요. |
자동 크기 | 범례 영역의 자동 조정을 활성화하세요. |
수평 정렬 | 데이터 차트에서 범례의 수평 정렬을 설정하세요. |
수직 정렬 | 데이터 차트에서 범례의 수직 정렬을 설정하세요. |
범례 자동 줄 바꿈 | 범례에 항목이 많을 때 자동 줄 바꿈을 활성화하세요. |
레이아웃
이 설정의 속성은 시각적 명확성을 향상시키기 위해 차트 레이아웃을 정리하는 데 필요합니다.
설정 | 설명 |
|---|---|
X 위치 | 데이터 차트의 현재 x-위치에 대한 정보를 설정하세요. |
Y 위치 | 데이터 차트의 현재 y-위치에 대한 정보를 설정하세요. |
너비 | 데이터 차트의 너비를 설정하세요. |
높이 | 데이터 차트의 높이를 설정하세요. |
애니메이션
이 설정의 속성은 데이터를 애니메이션 효과로 부드럽게 표시하여 사용자 참여를 향상시키는 데 도움이 됩니다.
설정 | 설명 |
|---|---|
호버 애니메이션 표시 | 마우스가 데이터 포인트 위에 올려졌을 때 애니메이션을 활성화하세요. |
업데이트 애니메이션 표시 | 데이터 차트 설정이 변경될 때 애니메이션을 활성화하세요. |