차트에 오류 막대 추가

SpreadJS는 차트에서 오류 막대를 추가, 수정 및 제거하는 기능을 제공합니다. 오류 막대는 차트 작업 중 일반 데이터 시리즈 위에 추가할 수 있습니다. 사용자는 데이터 시리즈의 모든 데이터 포인트 또는 데이터 마커에 대해 표준 오류 값, 백분율 또는 표준 편차로 오류 막대를 표시할 수 있습니다.

사용 시나리오

오류 막대는 과학자, 통계학자 및 연구 분석가에게 데이터 변동성과 측정 정확도를 보여주는 데 매우 유용한 도구로 작용합니다.

차트에 오류 막대를 포함하면 특히 다음과 같은 경우에 유리합니다:

오차 범위 및 표준 편차를 한눈에 식별 및 분석해야 할 때
단일 또는 다중 데이터 포인트에 대한 오류를 나타내거나 불확실성을 정량화해야 할 때
최대한의 정밀도가 요구되는 애플리케이션에서 작업할 때. 이 경우 오류 막대는 약간의 비율 차이로도 데이터 분석 및 연구 결과에 위험을 주지 않으면서 정확성을 보장합니다.

예시: 과학 실험 또는 회계 애플리케이션의 결과에서 ±15%의 오류 값을 보여주고자 할 경우, 차트에서 해당 데이터를 나타내기 위해 오류 막대를 구성할 수 있습니다.

또한 신뢰 구간, 오차 범위, 표준 편차를 계산하고 표시할 뿐만 아니라, 오류 막대는 차트의 전반적인 데이터 시각화를 향상시키는 효과적인 방법을 제공합니다.

지원되는 차트 유형

오류 막대를 추가할 때 다음 차트 유형을 지원합니다:

세로 막대형 차트
가로 막대형 차트
꺾은선형 차트
xy 분산형 차트
영역형 차트
거품형 차트

방향 및 순서 규칙

오류 막대의 방향은 사용 중인 차트 유형에 따라 자동으로 결정되며, 이 속성은 사용자가 설정하거나 수정할 수 없습니다.

세로 막대형, 꺾은선형 또는 영역형 차트의 경우, 오류 막대는 수직 방향으로 표시됩니다.
가로 막대형 차트의 경우, 오류 막대는 수평 방향으로 표시됩니다.
xy 분산형 차트 또는 거품형 차트의 경우, 오류 막대는 수평 방향, 수직 방향, 양 방향 모두로 표시될 수 있습니다.

차트 유형에 따라 오류 막대 및 기타 차트 요소의 그리기 순서가 달라집니다.

영역형, 세로 막대형, 가로 막대형 차트에서는 오류 막대가 앞에 그려집니다.
꺾은선형, 분산형, 거품형 차트에서는 오류 막대가 뒤에 그려집니다.

오류 막대 유형

차트에 추가할 수 있는 오류 막대의 유형은 세 가지입니다: Plus, Minus, Both

유형	설명
Plus	이 오류 막대 유형은 양수 값만을 표시합니다.
Minus	이 값은 동일 축 방향에서 데이터 값의 백분율로 오류를 나타냅니다.
Both	이 값은 여러 표준 편차로 오류를 나타내며, 설정된 편차 및 차트 데이터 값에 따라 계산된 값을 포함합니다.

오류 막대 끝 스타일

사용자는 선 끝 부분의 캡 가시성을 토글하여 오류 막대의 기본 모양을 조정할 수 있습니다. 사용 가능한 옵션은 "No Cap" 과 "Cap" 입니다.

유형	설명
No Cap	오류 막대 선 끝의 캡을 숨깁니다.
Cap	오류 막대 선 끝의 캡을 표시합니다.

오류 막대 수치 유형

사용자는 표시하고자 하는 정확한 오류 수치를 설정할 수 있습니다. 사용 가능한 옵션은 다음과 같습니다: 고정값, 벡분율, 표준 편차, 표준 오차, 사용자 정의

유형	설명
고정값	이 값은 절대값으로 오류를 나타냅니다.
벡분율	이 값은 동일 축 방향에서 데이터 값의 백분율로 오류를 나타냅니다.
표준 편차	이 값은 여러 표준 편차로 오류를 나타내며, 설정된 편차 및 차트 데이터 값에 따라 계산됩니다.
표준 오차	이는 평균의 표준 오차를 의미합니다. (value 속성은 사용되지 않음)
사용자 정의	사용자 지정 오류 값은 바인딩 속성을 통해 바인딩되거나, `positive` 및 `negative` 값을 포함하는 객체로 설정되며, 이는 수식 또는 고정 값으로 지정됩니다.

다음 코드는 차트에서 다양한 오류 막대를 사용하는 방법을 보여줍니다:

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();