상자 수염 그림

wijmo.chart.analytics 모듈에는 Series 클래스를 확장하여 데이터에 대한 추가 정보를 제공하는 클래스가 포함되어 있습니다: trend lines, moving averages, error bars, box and waterfall plots, and function plots.

Box & Whisker 차트(AKA 상자 그림)는 일반적으로 서로 다른 숫자 데이터 세트 간의 분포를 비교하는 데 사용됩니다. 상자(Box)와 수염(Whisker)은 사분위수를 통해 숫자 데이터 그룹을 보여 줍니다. 상자(Box)(수염(Whiskers))에서 수직으로 연장된 선이 있어 상위 및 하위 사분위수 외부의 변동성을 나타냅니다.

아래 단계에 따라 상자 수염 차트(Box and Whisker chart)를 만들 수 있습니다:

하나 이상의 BoxWhisker 계열(Series) 객체를 만듭니다.
이름 및 바인드 속성을 설정하여 BoxWhisker 시리즈를 구성합니다.(숫자 배열을 포함하는 속성에 바인딩해야 합니다)
디스플레이를 미세하게 조정하려면 groupWidth 및 __gapWidth__와 같은 추가 속성을 설정합니다.

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

// create BoxWhisker series for 'sales' and add it to the chart
var sales = new analytics.BoxWhisker();
sales.name = 'Sales';
sales.binding = 'sales';
sales.groupWidth = .7;
sales.gapWidth = .2;
sales.showInnerPoints = true,
myChart.series.push(sales);

chart-box-whisker

사전 계산된 통계 사용

기본적으로 BoxWhisker 계열은 바인딩된 각 데이터 포인트에 숫자 배열이 포함되어 있다고 가정합니다. 렌더링할 때 계열은 해당 배열에서 상자 수염 차트에 필요한 통계값인 최솟값, 최댓값, 사분위수, 중앙값, 평균 및 이상값을 계산합니다.

이러한 통계값이 이미 계산되어 있다면 boxPlotData 속성을 통해 제공할 수 있습니다. 이 속성을 설정하면 계열은 바인딩된 숫자 배열에서 통계값을 계산하는 대신, 제공된 통계값을 사용하여 각 상자를 렌더링합니다.

이 기능은 서버 또는 전처리 단계에서 통계값을 미리 계산하는 경우에 유용하며, 특히 대규모 데이터 세트를 처리할 때 효과적입니다.

처리된 통계값 바인딩

boxPlotData 속성에는 렌더링되는 각 상자의 최종 통계값을 나타내는 객체 배열을 지정할 수 있습니다.

뷰의 순서가 변경되지 않는 단순 배열 기반 데이터에서는 각 항목이 바인딩된 데이터에서 동일한 인덱스에 있는 데이터 포인트에 대응합니다.

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

let view = new wijmo.CollectionView(data);

let salesSeries = new analytics.BoxWhisker({
    name: 'Sales',
    binding: 'sales',
    groupWidth: 0.7,
    gapWidth: 0.2,
    boxPlotData: data.map(item => item.salesBoxPlotData)
});

let theChart = new chart.FlexChart('#theChart', {
    itemsSource: view,
    bindingX: 'country'
});

theChart.series.push(salesSeries);

view.sortDescriptions.push(new wijmo.SortDescription('country', true));

제공된 통계값은 최종 값으로 처리됩니다.

boxPlotData의 각 항목에는 min, max, firstQuartile, thirdQuartile, median에 대한 유효한 값이 포함되어야 합니다. 필수 값 중 하나라도 누락되면 해당 항목은 유효하지 않은 것으로 처리되며, 해당 데이터 포인트에는 원본 배열을 사용하는 기본 계산 방식이 적용됩니다.

대체 동작

boxPlotData 항목이 다음 조건에 해당하는 경우 계열은 해당 데이터 포인트에 대해 바인딩된 표본 배열을 사용하여 기본 계산을 수행합니다.

null 또는 undefined인 경우
필수 숫자 값이 누락된 경우
렌더링되는 데이터 포인트에 해당하는 항목이 없는 경우

boxPlotData를 설정하지 않으면 계열은 기존과 동일하게 동작합니다.

`CollectionView`와 함께 사용

계열이 CollectionView에 바인딩된 경우 처리된 통계값은 기본 sourceCollection에 있는 항목의 객체 식별자를 기준으로 연결되며, 렌더링할 때 현재 뷰에 맞게 매핑됩니다.

뷰 변경

정렬, 필터링 또는 페이징처럼 뷰에만 영향을 주는 작업을 수행하는 경우에는 boxPlotData를 업데이트할 필요가 없습니다. 처리된 통계값은 자동으로 올바른 항목에 맞춰 유지됩니다.

원본 데이터 변경

기본 원본 데이터가 변경되는 경우 다음 사항이 적용됩니다.

항목 삭제: 남아 있는 항목의 통계값은 자동으로 올바르게 유지됩니다.
항목 추가: 새로 추가된 항목에 대응하는 boxPlotData 항목이 없으면 해당 데이터 포인트에는 원본 배열을 사용하는 기본 계산 방식이 적용됩니다. 새 항목에도 처리된 통계값을 사용하려면 boxPlotData를 함께 업데이트해야 합니다.
항목 교체(새 객체 인스턴스): 매핑은 객체 식별자를 기준으로 하므로 원본 항목을 새 객체로 교체한 경우 올바른 매핑을 유지하려면 boxPlotData를 다시 설정해야 합니다.

렌더링되는 항목과 일치하는 처리된 통계값이 없으면 계열은 해당 데이터 포인트의 바인딩된 원본 데이터를 사용하여 기본 계산을 수행합니다.

참고 사항
계열에는 여전히 sales와 같은 원본 데이터 바인딩 속성이 필요합니다.
boxPlotData 속성은 각 데이터 포인트의 통계 계산만 대체하며, 계열의 기본 바인딩 처리 과정 자체를 대체하지는 않습니다.

추가 상자 & 수염 옵션

이러한 추가 속성을 설정하여 디스플레이를 미세 조정합니다.

gapWidth: 백분율로 표시되는 그룹 간 간격의 너비입니다. 기본값은 0.1입니다. 최소값은 0이고 최대값은 1입니다.
groupWidth: 상자 그룹 너비를 백분율로 나타냅니다. 이 속성의 기본값은 0.8입니다. 최소값은 0이고 최대값은 1입니다.
QuartileCalculation: 사분위수 계산 메서드를 지정합니다. 옵션에는 사분위수를 계산할 때 중앙값을 포함하거나 제외하는 InclusiveMedian 및 ExclusiveMedian이 있습니다.
showMeanLine: 평균선 표시 여부를 정합니다.
showMeanMarker: 평균 마커 표시 여부를 정합니다.
showOutliers: 아웃라이어(Outliers) 표시 여부를 정합니다. 아웃라이어(Outliers)는 1사분위수와 3사분위수 사이의 범위를 벗어난 내부 포인트입니다.