오차 막대(Error Bars)

wijmo.chart.analytics 모듈에는 다음과 같이 계열(Series) 클래스를 확장하여 데이터에 대한 추가 정보를 제공하는 클래스가 포함되어 있습니다 : 추세선(trend lines),이동 평균(moving averages), 오차 막대(error bars), 상자 및 폭포 플롯(box and waterfall plots), 함수 플롯(plots).

오차막대(ErrorBar) 클래스는 일반 계열(Series) 클래스를 확장하여 일반 계열 데이터 위에 추가할 수 있는 오차 막대를 제공합니다.

아래 단계에 따라 오차 막대가 있는 계열(Series)을 만들 수 있습니다.

1. 오차막대 계열(Series)를 만듭니다.

2. 예를 들어 바인딩, 차트타입 및 스타일 속성을 설정하여 일반 계열(Series)와 같이 ErrorBar 계열을 구성합니다.

3. 데이터 포인트에 추가할 오차 막대의 크기를 결정하는 ErrorBar의 value 및 errorAmount 속성을 설정합니다.

예시:

import * as chart from '@mescius/wijmo.chart';
import * as analytics from '@mescius/wijmo.chart.analytics';

// create an ErrorBar series for 15% and add it to the Chart
var errorBar = new analytics.ErrorBar();
errorBar.binding = 'amount';
errorBar.chartType = 'Column';
errorBar.value = 0.15;
errorBar.errorAmount = 'Percentage';
myChart.series.push(errorBar);

오차 막대에 지원되는 차트 유형:

• 열(Column)

• 막대(Bar)

• 선(Line)

• 라인심볼(LineSymbols)

• 스플라인(Spline)

• 범위영역(Area)

• 범위영역 스플라인(AreaSpline)

지원되는 에러 발생량

errorAmount(에러 발생량) 속성은 값(value) 속성의 의미를 지정합니다.아래의 에러 발생량 정의 중 하나를 사용합니다.

• FixedValue: 값(value) 속성은 오류를 절대값으로 나타냅니다.

• Percentage: 값(value) 속성은 오류를 백분율로 나타냅니다.

• StandardDeviation: 값(value) 속성은 오류를 표준 편차의 수로 나타냅니다.

• StandardError: 에러는 평균의 표준 오차입니다(값 속성은 사용되지 않습니다).

• Custom: 오류 값은 binding 속성을 통해 바인딩되거나 '더하기' 및 '빼기' 값이 있는 객체로 설정됩니다.

사용자 정의 에러 발생량

모든 오차 막대에 대해 정적 값을 설정하는 대신, 데이터 세트 내에서 사용자 정의 에러 발생량을 제공하고 오차 막대(ErrorBar) 계열(Series)에 바인딩할 수도 있습니다. 이는 바인딩 속성을 통해 수행되거나 '더하기' 및 '빼기' 값이 있는 객체로 설정됩니다.

예시:

import * as chart from '@mescius/wijmo.chart';
import * as analytics from '@mescius/wijmo.chart.analytics';

var errorBar = new analytics.ErrorBar();
errorBar.binding = 'amount,errorPlus,errorMinus';
errorBar.chartType = 'Column';
myChart.series.push(errorBar);

이 예에서 바인딩된 데이터 객체에는 최소한 세 개의 필드가 있습니다: amount, errorPlus, errorMinus

오차 막대(Error Bars) 스타일

errorBarStyle 속성을 SVG 스타일 속성(stroke, strokeWidth)이 포함된 객체로 설정하여 오류 막대 모양을 수정합니다. 방향(direction) 속성을 설정하여 오차 막대의 방향을 설정할 수 있습니다. endStyle 열거형 설정으로 선의 끝 캡 표시 여부를 토글할 수도 있습니다.

예시:

errorBar.direction = 'Both'; // 'Minus' or 'Plus'
errorBar.endStyle = 'NoCap'; // 'Cap'
errorBar.errorBarStyle = {
    stroke: 'darkred',
    strokeWidth: 3
  };