Wijmo FlexChart의 다섯가지 주요 기능

추천0

페이지 정보

작성자 GrapeCity

작성일 2019-05-21 13:55 조회 4,903회 댓글 0건

본문

완전한 사용자 정의를 위한 ItemFormatter

ItemFormatter란 무엇입니까? Wijmo 용어로는 "유연성"을 FlexChart에 넣는 것이 ItemFormatter입니다. 일반적으로 모든 데이터 시각화 라이브러리를 사용할 경우 기본 제공 기능을 통해 고객의 요구 사항의 70% 정도를 충족할 수 있습니다. 그러나 고객이 원하는 차트의 100%에 도달 할 수 있도록 유연한 라이브러리가 필요합니다. ItemFormatter는 데이터 포인트가 렌더링되는 방식을 완전히 제어할 수 있도록 모든 개별 데이터 포인트에 대해 실행되는 함수입니다. 일반적인 조건부 서식 유형 시나리오에 사용되며 기본 기능 및 차트 유형을 넘어 시각화를 발전시키는 데 사용됩니다. 몇 가지 예를 살펴 보겠습니다.

조건부 서식 – 값을 기준으로 일부 데이터 요소의 스타일만 지정해야 하는 경우 ItemFormatter 함수를 사용하여 조건부 스타일을 적용할 수 있습니다.

조건부 서식 데모 확인하기

선 세그먼트 스타일 지정 – 조건부 서식과 유사하지만 꺾은선형 차트의 경우 ItemFormatter 콜백 함수를 사용하여 선의 각 세그먼트를 사용자 정의 할 수 있습니다.

Custom Line Segments 데모 확인하기

사용자 정의 드로잉 데이터 포인트 – ItemFormatter는 색상과 선 두께를 변경하는 것 은 물론 그 이상을 수행할 수 있으며 새로운 요소를 그리거나 차트 유형을 변경할 수도 있습니다. 이 샘플은 화살표를 그려 벡터 차트를 만듭니다.

Custom Series 데모 확인하기

이 샘플은 추가 데이터 값을 나타내기 위해 내부 막대를 그립니다.

Gantt 데모 확인하기

이 데모는 더 많은 사용자 정의를 위해 렌더링 된 방법도 사용합니다.

사용자 정의 축 라벨 - Axis 클래스에는 항목 축을 따라 특정 라벨의 내용과 모양을 사용자 정의할 수 있는 itemFormatter 속성도 있습니다. 사용자 정의 축 라벨 데모가 어떻게 작동하는지 확인해 보세요.

날짜 그룹화를 위한 AggregateSeries

날짜는 모든 비즈니스 데이터에 공통적으로 적용되며 일반적으로 날짜 중심 데이터를 사용하여 추세 파악 및 기록 분석을 위해 차트를 시각화합니다. 사용자 정의 AggregateSeries 클래스는 기본 그룹화 및 달력 기반 로직을 처리하므로 날짜 작업이 더 간단합니다. FlexChart의 AggregateSeries를 사용하면 일, 주, 월, 년 등과 같은 일반적인 날짜 측정을 통해 차트 내에 바인딩 된 데이터를 신속하게 그룹화할 수 있습니다.

AggregateSeries 샘플을 통해 이 기능이 실제로 어떻게 동작하는지 확인해볼 수 있습니다. 이 기능을 차트에 구현하는 방법에 대해 간단하게 설명하겠습니다.

AggregateSeries 클래스는 wijmo.chart.research 모듈의 일부입니다. 다른 시리즈처럼 FlexChart에 추가할 수 있습니다. 데이터 집계 방법과 날짜 간격을 결정하기 위해 groupAggregate 및 groupInterval 속성을 설정합니다.

import * as chart from '@grapecity/wijmo.chart';
import * as research from '@grapecity/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(Average, 평균)
Cnt(Count, 수)
Max(Maximum, 최대값), Min(Minimum, 최소값)
Rng(range, 범위)
Std(standard deviation, 표준 편차)
StdPop(standard deviation population, 표준 편차 인구)
Var(variance, 분산)
VarPop(variance population, 분산 인구)

groupInterval 속성은 다음의 항목을 포함한 여러 날짜 형식을 지원합니다.

DD(일)
WW(주)
MM(월)
YYYY(연도)

이 기본 제공 기능을 사용하면 몇 년에서 몇 달, 몇 주 등으로 보기를 쉽게 전환하여 그룹 간에 쉽게 전환 할 수 있습니다. AggregateSeries 클래스도 자동 날짜 간격을 지원하므로, 데이터 바인딩 전에 데이터 세트의 범위를 알 수 없는 경우에 적합합니다.

그룹화 및 드릴 다운 문서를 통해 이 기능의 작동 방식을 확인할 수 있습니다.

대화형 확대/축소용 범위 선택기

범위 선택기 기능을 사용하면 대부분의 사용자가 인식할 수 있는 방식으로 대화형 기능을 제공할 수 있습니다. 범위 선택기는 Google Finance 차트에서 많이 사용되는 시각화 기술을 기반으로 합니다. "확대/축소" 기술은 다른 차트에서도 일반적으로 볼 수 있지만 범위 선택기가 제공하는 정확하고 직관적인 확대/축소 환경을 제공하지는 않습니다.

범위 선택기는 가장 인기있는 차트 기능 중 하나가 되었습니다.

범위 선택 실시간 데모 확인

다음에서 차트에서 범위 선택기를 구현하는 방법에 대해 간단하게 설명합니다.

1. 먼저, 두 개의 FlexCharts를 구성해야 합니다.

하단 - 전체 데이터 세트를 갖고 있는 FlexChart
상단 - 범위 선택기에 의해 제어되는 범위로 설정된 FlexChart

(다음 단계에서 자세히 설명하겠습니다.)

2. 그 다음, 하단 차트를 생성자의 매개 변수로 사용하여 RangeSelector 개체를 만듭니다 .

3. RangeSelector의 rangeChanged 이벤트를 수신하여 최상위 차트의 X축 범위를 업데이트합니다.

아래는 범위 선택기 문서에서 가져온 코드 스니펫입니다.

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

// create the regular chart
var regularChart = new chart.FlexChart('#regularChart');

// create the second chart for the range selector
var secondChart = new chart.FlexChart('#secondChart');

// create RangeSelector
var rangeSelector = new interaction.RangeSelector(secondChart, {
    max: regularChart.itemsSource[0].date.valueOf(), // now
    min: regularChart.itemsSource[30].date.valueOf(), // a month ago
        minScale: .05, // restrict selection to between 5% and
        maxScale: .75, // 75% of the data
    rangeChanged: function(s, e) {
        regularChart.axisX.min = s.min;
      regularChart.axisX.max = s.max;
    }
});

더 많은 사용자 정의를 위한 주석

주석은 컨트롤의 실제 값을 검증하는 또 다른 기능입니다. 주석 기능은 기본적으로 차트 전체에 붙일 수 있는 "레이어"입니다. 물론 표준 주석 레이블을 차트에 추가하는 데 사용되지만, 차트를 사용자 정의해야 하는 경우 창의력을 발휘하여 참조선 및 알람 영역과 같은 다른 기능에 주석을 사용할 수 있습니다.

지원되는 주석 유형 : 직사각형, 정사각형, 원, 타원, 선, 다각형, 이미지, 텍스트

다음은 FlexChart에 추가된 주석의 예입니다.

다음과 같은 간단한 접근 방식으로 FlexChart에 주석을 추가할 수 있습니다.

AnnotationLayer 만들기
주석 레이어에 주석 추가
각 주석에 대해 첨부 속성을 설정하여 첨부 방법 을 결정
각 주석에 대해 pointIndex 또는 seriesIndex 속성을 설정하여 연결된 위치 결정

개발자 문서에서 FlexChart에서 주석 확인하기

라이브 데모 확인하기

생동감 있는 차트를 위한 애니메이션 업데이트

데이터 시각화 라이브러리를 사용하는 경우 애니메이션이 내장된 라이브러리가 있어야 합니다. Wijmo FlexChart는 애니메이션을 로드하고 업데이트합니다. 애니메이션 업데이트의 가장 큰 장점은 필요할 때까지 업데이트가 필요하다는 사실을 깨닫지 못하면 업데이트 애니메이션을 사용할 수 없다는 것입니다. 애니메이션 로딩은 훌륭하게 수행되고, 빠르기까지 하며, 사용자는 계속 움직일 수 있습니다. 생동감 있는 애니메이션 차트에 애니메이션 업데이트를 적용하면 애니메이션 업데이트가 계속 제공됩니다.

애니메이션 GIF

애니메이션 라이브 데모 실행

(참고: 애니메이션 업데이트를 보려면 추가 및 제거 버튼을 클릭하세요)

어떻게 작동하나요?

Wijmo CollectionView에 의해 처리됩니다. FlexChart는 CollectionView 클래스를 데이터 소스로 사용하기 때문에 데이터에 대한 모든 변경 사항이 차트에 자동으로 반영됩니다. 이 CollectionView는 collectionView 속성에 의해 노출됩니다. 이 컬렉션에서 포인트를 추가 및 제거하여 차트에서 업데이트 되는 것을 볼 수도 있습니다. 자세한 내용은 개발자 문서에서 애니메이션을 확인해 보세요.

업데이트 애니메이션이 중요한 이유

FlexChart는 이전 값이나 현재 값에서 새로운 값으로 애니메이션을 적용할 수 있는 스마트한 기능을 제공하므로, 데이터 포인트가 시간에 따른 데이터 변경을 표시할 때 문자 그대로 화면을 활주할 수 있습니다. FlexChart 및 모바일 개발을 통해 애니메이션에 대한 추가 정보를 확인하세요.