# 차트에 오류 막대 추가
## Content
SpreadJS는 차트에서 오류 막대를 추가, 수정 및 제거하는 기능을 제공합니다. 오류 막대는 차트 작업 중 일반 데이터 시리즈 위에 추가할 수 있습니다. 사용자는 데이터 시리즈의 모든 데이터 포인트 또는 데이터 마커에 대해 표준 오류 값, 백분율 또는 표준 편차로 오류 막대를 표시할 수 있습니다.
## **사용 시나리오**
오류 막대는 과학자, 통계학자 및 연구 분석가에게 데이터 변동성과 측정 정확도를 보여주는 데 매우 유용한 도구로 작용합니다.
차트에 오류 막대를 포함하면 특히 다음과 같은 경우에 유리합니다:
* 오차 범위 및 표준 편차를 한눈에 식별 및 분석해야 할 때
* 단일 또는 다중 데이터 포인트에 대한 오류를 나타내거나 불확실성을 정량화해야 할 때
* 최대한의 정밀도가 요구되는 애플리케이션에서 작업할 때. 이 경우 오류 막대는 약간의 비율 차이로도 데이터 분석 및 연구 결과에 위험을 주지 않으면서 정확성을 보장합니다.
**예시**: 과학 실험 또는 회계 애플리케이션의 결과에서 ±15%의 오류 값을 보여주고자 할 경우, 차트에서 해당 데이터를 나타내기 위해 오류 막대를 구성할 수 있습니다.
또한 신뢰 구간, 오차 범위, 표준 편차를 계산하고 표시할 뿐만 아니라, 오류 막대는 차트의 전반적인 데이터 시각화를 향상시키는 효과적인 방법을 제공합니다.
## 지원되는 차트 유형
오류 막대를 추가할 때 다음 차트 유형을 지원합니다:
* 세로 막대형 차트
* 가로 막대형 차트
* 꺾은선형 차트
* xy 분산형 차트
* 영역형 차트
* 거품형 차트
## 방향 및 순서 규칙
오류 막대의 방향은 사용 중인 차트 유형에 따라 자동으로 결정되며, 이 속성은 사용자가 설정하거나 수정할 수 없습니다.
* 세로 막대형, 꺾은선형 또는 영역형 차트의 경우, 오류 막대는 **수직 방향**으로 표시됩니다.
* 가로 막대형 차트의 경우, 오류 막대는 **수평 방향**으로 표시됩니다.
* xy 분산형 차트 또는 거품형 차트의 경우, 오류 막대는 **수평 방향**, **수직 방향**, **양 방향 모두**로 표시될 수 있습니다.
차트 유형에 따라 오류 막대 및 기타 차트 요소의 그리기 순서가 달라집니다.
* 영역형, 세로 막대형, 가로 막대형 차트에서는 오류 막대가 **앞에 그려집니다**.
* 꺾은선형, 분산형, 거품형 차트에서는 오류 막대가 **뒤에 그려집니다**.
## 오류 막대 유형
차트에 추가할 수 있는 오류 막대의 유형은 세 가지입니다: **Plus**, **Minus**, **Both**
| 유형 | 설명 |
| --- | --- |
| Plus | 이 오류 막대 유형은 **양수 값**만을 표시합니다. |
| Minus | 이 값은 동일 축 방향에서 데이터 값의 **백분율**로 오류를 나타냅니다. |
| Both | 이 값은 **여러 표준 편차**로 오류를 나타내며, 설정된 편차 및 차트 데이터 값에 따라 계산된 값을 포함합니다. |
## 오류 막대 끝 스타일
사용자는 선 끝 부분의 캡 가시성을 토글하여 오류 막대의 기본 모양을 조정할 수 있습니다. 사용 가능한 옵션은 **"No Cap"** 과 **"Cap"** 입니다.
| 유형 | 설명 |
| --- | --- |
| No Cap | 오류 막대 선 끝의 **캡을 숨깁니다**. |
| Cap | 오류 막대 선 끝의 **캡을 표시합니다**. |
## 오류 막대 수치 유형
사용자는 표시하고자 하는 정확한 오류 수치를 설정할 수 있습니다. 사용 가능한 옵션은 다음과 같습니다: **고정값, 벡분율, 표준 편차, 표준 오차, 사용자 정의**
| 유형 | 설명 |
| --- | --- |
| 고정값 | 이 값은 **절대값**으로 오류를 나타냅니다. |
| 벡분율 | 이 값은 동일 축 방향에서 데이터 값의 **백분율**로 오류를 나타냅니다. |
| 표준 편차 | 이 값은 **여러 표준 편차**로 오류를 나타내며, 설정된 편차 및 차트 데이터 값에 따라 계산됩니다. |
| 표준 오차 | 이는 **평균의 표준 오차**를 의미합니다. (value 속성은 사용되지 않음) |
| 사용자 정의 | 사용자 지정 오류 값은 바인딩 속성을 통해 바인딩되거나, `positive` 및 `negative` 값을 포함하는 객체로 설정되며, 이는 수식 또는 고정 값으로 지정됩니다. |
다음 코드는 차트에서 다양한 오류 막대를 사용하는 방법을 보여줍니다:
```javascript
var activeSheet = spread.getActiveSheet();
activeSheet.suspendPaint();
//데이터 준비
activeSheet.setValue(0, 1, "Y-2016");
activeSheet.setValue(0, 2, "Y-2017");
activeSheet.setValue(0, 3, "Y-2018");
activeSheet.setValue(1, 0, "Mobile Phones");
activeSheet.setValue(2, 0, "Laptops");
activeSheet.setValue(3, 0, "Tablets");
for (var r = 1; r <= 3; r++) {
for (var c = 1; c <= 3; c++) {
activeSheet.setValue(r, c, parseInt(Math.random() * 5000));
}
}
//columnClustered 추가
chart_columnClustered = activeSheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 100, 600, 400, "A1:D4");
// series[0], 즉 Mobile Phones에 오류 막대 추가
var series1 = chart_columnClustered.series().get(0);
series1.errorBars = {
vertical: {
type: 1, // 음수 방향
valueType: 2, // 백분율
value: 70, // 70%
noEndCap: false, // 끝캡 없음
style: {
color: 'red', // 선 색상
width: 1.5 // 선 굵기
}
}
};
// series[1], 즉 Laptops에 오류 막대 추가
var series2 = chart_columnClustered.series().get(1);
series2.errorBars = {
vertical: {
type: 1, // 음수 방향
valueType: 2, // 백분율
value: 70, // 70%
noEndCap: false, // 끝캡 없음
style: {
color: 'blue', // 선 색상
width: 1.5 // 선 굵기
}
}
};
// series[2], 즉 Tablets에 오류 막대 추가
var series3 = chart_columnClustered.series().get(2);
series3.errorBars = {
vertical: {
type: 1, // 음수 방향
valueType: 2, // 백분율
value: 70, // 70%
noEndCap: false, // 끝캡 없음
style: {
color: 'green',// 선 색상
width: 1.5 // 선 굵기
}
}
};
chart_columnClustered.series().set(0, series1);
chart_columnClustered.series().set(1, series2);
chart_columnClustered.series().set(2, series3);
// 차트 제목 구성
var title = chart_columnClustered.title();
title.text = "Error Bars for Annual Sales Record";
title.fontFamily = "Cambria";
title.fontSize = 28;
title.color = "Red";
chart_columnClustered.title(title);
activeSheet.resumePaint();
```