[]
데모 테마 디자이너 도움말 API
다른 샘플 다운로드
(Showing Draft Content)

FlexChart 그룹화 & 드릴다운

모든 Wijmo 컨트롤과 같이, 차트는 모든 데이터 관련 작업을 Collection View 클래스에 위임하므로, 데이터를 필터링, 정렬 또는 그룹화하려면, Collection View를 사용하여 작업을 수행할 수 있습니다. 기본적으로 FlexChart는 도표 자료 데이터에서만 작동합니다. FlexChart를 특별한 유형의 데이터 그리드로 생각하는 것이 유용할 수 있는데, 여기서 열은 계열(Series)에 의해 표시되고 행은 차트의 데이터 포인트 입니다. 따라서 데이터를 그룹화하려면 FlexChart를 채우기 전에 데이터를 그룹화해야 합니다.

CollectionView를 사용하여 그룹화

CollectionView.groupDescriptions 속성을 사용하여 그룹화할 필드를 지정합니다.

import * as wijmo from '@mescius/wijmo';

// create a CollectionView containing data grouped by 
// country, product, color, and type
var view = new wijmo.CollectionView(getData(), {
    groupDescriptions: 'country,product,color,type'.split(',')
  });

그룹화된 데이터를 FlexChart와 함께 사용하려면, 지정된 그룹에 속한 데이터를 반환하는 메서드을 코드에 포함합니다.

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

// create the chart
  var myChart = new chart.FlexChart('#myChart', {
    itemsSource: getGroupData(view), // show first-level grouping
    bindingX: 'name',
    series: [{
      binding: 'sales',
      name: 'Sales'
    }]
  });

이 예시에서, getGroupData 메서드는 이름과 판매 필드가 있는 객체 배열을 반환한 다음 차트에 플롯됩니다.

// get the group data for a selected point
  function getGroupData(group) {

    // get items for this group, aggregate by sales
    var arr = [];
    group.groups.forEach(function(g) {
      arr.push({
        name: g.name,
        sales: g.getAggregate('Sum', 'sales'),
        group: g
      });
    });

    // return a new collection view sorted by sales
    return new wijmo.CollectionView(arr, {
      sortDescriptions: [
        new wijmo.SortDescription('sales', false)
      ]
    });
  }

드릴다운 시나리오

차트를 사용한 일반적인 그룹화 시나리오는 클릭 시 범주별로 그룹화된 데이터 포인트를 처음에 표시하고, 그룹을 구성하는 개별 데이터 포인트가 있는 차트를 다시 로드하는 것입니다.


대화형 클릭을 처리하려면 hitTest 또는 selectionChanged 이벤트를 사용할 수 있습니다. 이 예시에서는 선택한 항목을 사용하여 그룹화된 데이터를 가져와 FlexChart에 대한 새 itemsSource로 설정합니다.

myChart.selectionMode = 'Point'; // enable selection
myChart.selectionChanged = function(s, e) {
      if (s.selection) {
        var point = s.selection.collectionView.currentItem;
        if (point && point.group && !point.group.isBottomLevel) {
          myChart.itemsSource = getGroupData(group);
        }
      }
    }

전체 그룹화 작업 & 드릴다운 샘플은 FlexChart 데모에서 확인할 수 있습니다.

Date Aggregate Series (Research)

AggregateSeries 클래스는 wijmo.chart.research 모듈의 일부입니다. 날짜 객체를 사용할 때 그룹화 와 데이터 통합을 단순화하기 위한 사용자 정의 계열(Series) 입니다.


예를 들어 Aggregate 계열(Series)를 다른 계열들처럼 FlexChart에 추가할 수 있습니다. groupAggregate 과 groupInterval 속성을 설정하여 데이터 집계 방법과 간격을 결정합니다.

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

var myChart = new chart.FlexChart('#myChart');
myChart.beginUpdate();
myChart.itemsSource = getAppData();

// create aggregate data series summed by Year
var series = new research.AggregateSeries();
series.name = 'Sales';
series.binding = 'sales';
series.bindingX = 'date';
series.groupAggregate = 'Sum';
series.groupInterval = 'YYYY';
myChart.series.push(series);
myChart.endUpdate();

groupAggregate 속성은 Sum, Avg(평균), Cnt(개수), Max, Min, Rng(범위), Std(표준 편차), StdPop(표준 편차 모집단), Var(분산) 및 VarPop(분산 모집단)을 지원합니다.


groupInterval 속성은 DD(일), WW(주), MM(월) 및 YYYY(년)를 지원합니다.


FlexChart는 __autoInterval__을 true로 설정하고 포함 될 간격을 제공하여, 간격을 자동으로 생성할 수도 있습니다.

series.autoGroupIntervals = ["DD", "WW", "MM", "YYYY"];
series.autoInterval = true;