FlexChart 데이터 바인딩

FlexChart를 사용하면 표 형식의 데이터를 비즈니스 차트로 시각화할 수 있습니다. 선택, 확대/축소, 드릴다운, 서식 지정 등을 포함하여 데이터를 표시하고 상호 작용하는 방법에 대한 다양한 옵션을 제공합니다.

FlexChart를 데이터 바인딩를 원하시면 다음 단계를 따라주시길 바랍니다.

1. itemsSource 속성을 일반 JavaScript 객체가 포함된 배열로 설정하여 차트를 바인딩합니다.
2. bindingX 속성을 X축을 따라 표시할 소스 데이터의 필드 이름으로 설정합니다.
3. 차트의 series 배열에, 각 열에 대해 Y축에 표시할 데이터 필드를 정의하는 객체를 채웁니다.

import * as wjChart from '@grapecity/wijmo.chart';

var myChart = new wjChart.FlexChart('#myChart', {
    itemsSource: appData,
    bindingX: 'country',
    series: [
        { name: 'Sales', binding: 'sales' },
        { name: 'Expenses', binding: 'expenses' },
        { name: 'Downloads', binding: 'downloads' }
    ]
});

FlexChart는 차트의 __itemsSource__에 따라 시리즈 컬렉션을 자동으로 채웁니다.

FlexChart 초기화

위의 예에서 초기화는 FlexChart 생성자에 매개변수로 전달되었습니다.이 초기화 프로세스는 아래와 같이 initialize 메서드를 사용하여 별도로 처리할 수도 있습니다.

import * as wjChart from '@grapecity/wijmo.chart';

 var myChart = new wjChart.FlexChart('#myChart');
 myChart.initialize({
     itemsSource: appData,
     bindingX: 'country',
     series: [
         { name: 'Sales', binding: 'sales' },
         { name: 'Expenses', binding: 'expenses' },
         { name: 'Downloads', binding: 'downloads' }],
 });

또는 속성에 직접 액세스하여 FlexChart를 구성할 수 있습니다. 이 작업은 beginUpdate 호출과 endUpdate 호출 사이에 수행되어 그 사이의 알림이 일시 중단 됩니다.

var myChart = new wjChart.FlexChart('#myChart');
myChart.beginUpdate();

myChart.bindingX = 'country';
myChart.itemsSource = getAppData();

// create data series
var series1 = new wjChart.Series();
series1.name = 'Sales';
series1.binding = 'sales';
myChart.series.push(series1);
myChart.endUpdate();

CollectionView 사용

모든 Wijmo 컨트롤과 마찬가지로, 차트는 모든 데이터 관련 작업을 CollectionView 클래스에 위임하므로 데이터를 필터링, 정렬 또는 그룹화하려는 경우 CollectionView를 사용하여 수행할 수 있습니다. FlexChart는 열이 시리즈로 표시되고 행이 차트의 데이터 포인트인, 특별한 유형의 데이터 그리드로 생각하는 것이 유용할 수 있습니다.

차트의 itemsSource 속성을 배열 또는 __ObservableArray__로 설정하면 차트는 자동으로 CollectionView 인스턴스를 만들어 원래 배열을 래핑합니다. FlexChart는 CollectionView 클래스를 데이터 소스로 사용하기 때문에, 데이터에 대한 변경 사항은 차트에 자동으로 반영됩니다. 이 CollectionView는 액세스하려는 경우에 대비하여 collectionView 속성에 의해 노출됩니다.

예를 들어, 차트의 __collectionView__의 sortDescriptions 속성을 변경하여 데이터를 정렬할 수 있습니다.

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

var sd = myChart.collectionView.sortDescriptions;
sd.clear();
sd.push(new wijmo.SortDescription(prop, true))

여러 데이터 소스에 바인딩

FlexChart의 itemsSource 및 bindingX 속성은 기본적으로 차트의 모든 계열에 적용됩니다.

특정 시리즈는 이러한 속성을 재정의하고 다른 데이터 소스 및 바인딩을 사용할 수 있습니다. 이를 통해 동일한 차트에서 여러 데이터 소스를 사용할 수 있으며 차트 작성을 위해 데이터를 미리 처리해야 할 필요성이 줄어듭니다.

import * as wjChart from '@grapecity/wijmo.chart';

var myChart = new wjChart.FlexChart('#myChart', {
    series: [
    	{
      	name: 'Experiment 1', 
        itemsSource: getData(50, 0, 3),
        bindingX: 'x',
        binding: 'y' },
    	{
      	name: 'Experiment 2',
        itemsSource: getData(40, 100, 12),
        bindingX: 'x', 
        binding: 'y' },
    	{
      	name: 'Experiment 3',
        itemsSource: getData(30, -100, 24),
        bindingX: 'x', 
        binding: 'y' }
    ]
  });