React 차트 성능
React 차트는 수백만 개의 데이터 포인트를 렌더링하고 몇 밀리초마다 업데이트하는 고성능을 위해 최적화되었습니다. 그러나 차트 성능에 영향을 미치는 여러 차트 기능이 있으며 애플리케이션에서 성능을 최적화할 때 고려해야 합니다. 이 주제에서는 React 차트가 애플리케이션에서 가능한 한 빨리 작동하도록 안내합니다.
React Chart Performance Examples
다음 예제는 React 차트의 두 가지 고성능 시나리오를 보여줍니다.
React Chart with High-Frequency
고빈도 상황에서는 React 차트가 실시간 또는 지정된 밀리초 간격으로 업데이트되는 데이터 항목을 렌더링할 수 있습니다. 터치 기기로 차트와 상호작용할 때도 지연, 화면 깜빡임, 시각적 지연 등을 경험하지 못할 것입니다. 다음 샘플은 고주파 시나리오를IgrCategoryChart 보여줍니다.
React Chart with High-Volume
대량 상황에서는 React 차트가 100만 개의 데이터 포인트를 렌더링할 수 있으며, 최종 사용자가 확대/축소하거나 차트 내용을 탐색할 때 차트는 원활한 성능을 유지합니다. 다음 샘플은 고용량 시나리오를IgrCategoryChart 보여줍니다.
General Performance Guidelines
이 섹션에서는 React 차트의 오버헤드와 처리 업데이트에 추가되는 지침과 차트 기능을 나열합니다.
Data Size
많은 데이터 포인트(예: 10,000+)를 가진 데이터 소스를 그래프로 그리는 것이 필요하다면, 해당 목적을 위해 특별히 설계된 다음 유형의 시리즈 중 하나를 ReactIgrDataChart 사용하는 것을 권장합니다.
- 카테고리 분산형 차트 또는 분산형 마커 차트 대신 분산형 HD 차트
- 범주 형 선형 차트 또는 분산 선형 차트 대신 분산형 폴리선 차트
- 범주 영역 차트 또는 기둥 차트 대신 분산형 다각형 차트
Data Structure
React 차트는 데이터 포인트 배열을 속성에ItemsSource 바인딩하여 여러 데이터 소스를 렌더링하는 것을 지원합니다. 차트에서는 여러 데이터 소스를 하나의 데이터 항목이 아닌 여러 열로 포함하는 단일 데이터 소스로 평탄화하면 훨씬 빠릅니다. 예를 들어:
this.CategoryChart.dataSource = FlattenDataSource.create();
this.FinancialChart.dataSource = FlattenDataSource.create();
export class FlattenDataSource {
public static create(): any[] {
const data: any[] = [];
data.push({ "Year": "1996", "USA": 148, "CHN": 110 });
data.push({ "Year": "2000", "USA": 142, "CHN": 115 });
return data;
}
}
// instead of this data structure:
export class MultiDataSources {
public static create(): any[] {
const dataSource1: any[] = [];
dataSource1.push({ "Year": "1996", "Value": 148 });
dataSource1.push({ "Year": "2000", "Value": 142 });
const dataSource2: any[] = [];
dataSource2.push({ "Year": "1996", "Value": 110 });
dataSource2.push({ "Year": "2000", "Value": 115 });
const multipleSources: any[] = [dataSource1, dataSource2];
return multipleSources;
}
}
Data Filtering
ReactIgrCategoryChart과 컨트롤에는IgrFinancialChart 데이터를 분석하고 차트 시리즈를 생성하는 내장 데이터 어댑터가 있습니다. 하지만 실제로 렌더링하고 싶은 데이터 열만 필터링하면 더 빠르게includedPropertiesexcludedProperties 작동합니다. 예를 들어
this.Chart.includedProperties = [ "Year", "USA", "RUS" ];
this.Chart.excludedProperties = [ "CHN", "FRN", "GER" ];
Chart Performance Guidelines
Chart Types
선형 차트와 같은 단순한 차트 유형은 데이터 포인트 간 스플라인 라인의 복잡한 보간이 있어 스플라인 차트 사용보다 더 빠른 성능을 보입니다. 따라서 ReactchartType 속성이나 컨트롤을IgrCategoryChart 사용IgrFinancialChart 해 더 빠르게 렌더링되는 차트 유형을 선택해야 합니다. 또는 ReactIgrDataChart 컨트롤에서 더 빠른 직렬로 시리즈 유형을 변경할 수도 있습니다.
다음 표에는 각 차트 그룹의 가장 빠른 성능부터 느린 성능 순으로 차트 유형이 나열되어 있습니다.
* 분산형 다각형 차트 및 분산형 다중선 차트는 차트에 바인딩된 데이터 소스가 많은 경우 나머지 차트보다 성능이 더 좋습니다. 자세한 내용은 시리즈 컬렉션 섹션을 참조하세요. 그렇지 않으면 다른 차트 유형이 더 빠릅니다.
차트 애니메이션
차트 애니메이션을 활성화하면 React 차트에서 전환 애니메이션을 재생하는 동안 최종 렌더링 시리즈가 약간 지연됩니다.
차트 주석
콜아웃 주석, 크로스헤어 주석, 최종 값 주석과 같은 차트 주석을 활성화하면 React 차트의 성능이 약간 저하됩니다.
차트 하이라이트
차트 강조 표시를 활성화하면 React 차트의 성능이 약간 저하됩니다.
Chart Legend
런타임에 범례에 매핑된 시리즈나 데이터 항목의 제목이 자주 변경되는 경우 React 차트에 범례를 추가하면 성능이 저하될 수 있습니다.
차트 마커
React 차트에서 마커는 차트 성능 측면에서 특히 비쌉니다. 왜냐하면 차트의 레이아웃 복잡성을 높이고 특정 정보를 얻기 위해 데이터 바인딩을 수행하기 때문입니다. 또한 마커는 데이터 포인트가 많거나 바인딩된 데이터 소스가 많을 때 성능을 저하시킵니다. 따라서 마커가 필요하지 않으면 차트에서 제거해야 합니다.
이 코드 조각은 React 차트에서 마커를 제거하는 방법을 보여줍니다.
// on CategoryChart or FinancialChart
this.Chart.markerTypes.clear();
this.Chart.markerTypes.add(MarkerType.None);
// on LineSeries of DataChart
this.LineSeries.markerType = MarkerType.None;
Chart Resolution
속성을 더 높은 값으로 설정하면resolution 성능이 향상되지만, 그래프로 표시된 직렬의 그래픽 정밀도가 떨어집니다. 따라서 충실도가 허용 불가능할 때까지 증가시킬 수 있습니다.
이 코드 조각은 React 차트의 해상도를 낮추는 방법을 보여줍니다.
// on CategoryChart or FinancialChart:
this.Chart.Resolution = 10;
// on LineSeries of DataChart:
this.LineSeries.Resolution = 10;
차트 오버레이
차트 오버레이를 활성화하면 React 차트의 성능이 약간 저하됩니다.
차트 추세선
차트 추세선을 활성화하면 React 차트의 성능이 약간 저하됩니다.
축 유형
데이터 포인트 사이의 시간 범위를 기준으로 데이터 포인트 사이의 공백이 중요하지 않은 경우 DateTime 지원과 함께 x축을 사용하지 않는 것이 좋습니다. 대신, 데이터를 통합하는 방식이 더 효율적이기 때문에 순서/범주 축을 사용해야 합니다. 또한 순서/범주 축은 시간 기반 X축처럼 데이터에 대한 정렬을 수행하지 않습니다.
[!Note] The
IgrCategoryChartalready uses ordinal/category axis so there is no need to change its properties.
이 코드 스니펫은 andIgrFinancialChart 컨트롤에서IgrDataChart x축을 순서화/범주화하는 방법을 보여줍니다.
<IgrFinancialChart xAxisMode="Ordinal" />
<IgrDataChart>
<IgrCategoryXAxis label="Time" />
</IgrDataChart>
Axis Intervals
기본적으로 React 차트는 데이터의 범위를 기준으로 자동으로 계산yAxisInterval 됩니다. 따라서 축 간격을 특히 작은 값으로 설정하지 않아야 하며, 너무 많은 축 격자선과 축 라벨이 렌더링되는 것을 방지해야 합니다. 또한, 많은 축 격자선이나 축 라벨이 필요 없다면, 자동으로 계산된 축 구간보다 더 큰 성향을 높여yAxisInterval 보는 것도 고려해볼 수 있습니다.
[!Note] We do not recommend setting axis minor interval as it will decrease chart performance.
이 코드 조각은 React 차트에서 축 주요 간격을 설정하는 방법을 보여줍니다.
<IgrCategoryChart xAxisInterval={5} yAxisInterval={50}/>
<IgrFinancialChart xAxisInterval={5} yAxisInterval={50}/>
<IgrDataChart>
<IgrCategoryXAxis name="xAxis" interval={5} />
<IgrNumericYAxis name="yAxis" interval={50}/>
</IgrDataChart>
Axis Scale
더 높은 성능을 위해 속성을 false로 설정하는yAxisIsLogarithmic 것이 권장되는데, 이는 축 범위와 축 라벨 값을 로그 스케일로 계산하는 것보다 더 적은 연산이 필요하기 때문입니다.
Axis Labels Visibility
마커와 마찬가지로 축 레이블도 템플릿과 바인딩을 사용하기 때문에 비용이 많이 들고 데이터 컨텍스트가 자주 변경될 수 있습니다. 레이블을 사용하지 않는 경우 레이블을 숨기거나 간격을 늘려 축 레이블 수를 줄여야 합니다.
이 코드 조각은 React 차트에서 축 라벨을 숨기는 방법을 보여줍니다.
<IgrCategoryChart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed" />
<IgrFinancialChart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed" />
<IgrDataChart>
<IgrCategoryXAxis name="xAxis" labelVisibility="Collapsed" />
<IgrNumericYAxis name="yAxis" labelVisibility="Collapsed" />
</IgrDataChart>
Axis Labels Abbreviation
다만, React 차트는 true로 설정했을 때yAxisAbbreviateLargeNumbers 축 라벨에 큰 숫자(예: 10,000+)를 축 라벨로 표시하는 것을 지원합니다. 대신 데이터 항목의 큰 값을 공통 인자로 나누고, 그 값을 축약하는 데 사용하는 계수를 나타내는 문자열로 설정yAxisTitle 하여 사전 처리하는 것을 권장합니다.
이 코드 조각은 React 차트에서 축 제목을 설정하는 방법을 보여줍니다.
<IgrCategoryChart yAxisTitle="In millions of Dollars" />
<IgrFinancialChart yAxisTitle="In millions of Dollars" />
<IgrDataChart>
<IgrNumericYAxis title="In millions of Dollars" />
</IgrDataChart>
Axis Labels Extent
런타임 시 React 차트는 가장 긴 값을 가진 레이블을 기준으로 y축의 레이블 범위를 조정합니다. 이는 데이터 범위가 변경되고 레이블을 자주 업데이트해야 하는 경우 차트 성능을 저하시킬 수 있습니다. 따라서 차트 성능을 개선하기 위해 디자인 타임에 레이블 범위를 설정하는 것이 좋습니다.
다음 코드 조각은 React 차트에서 y축 레이블에 대한 고정 범위를 설정하는 방법을 보여줍니다.
<IgrCategoryChart xAxisLabelExtent={50} yAxisLabelExtent={50}/>
<IgrFinancialChart xAxisLabelExtent={50} yAxisLabelExtent={50}/>
<IgrDataChart>
<IgrCategoryXAxis name="xAxis" labelExtent={50} />
<IgrNumericYAxis name="yAxis" labelExtent={50} />
</IgrDataChart>
Axis Other Visuals
추가 축 시각적 요소(예: 축 제목)를 활성화하거나 기본값을 변경하면 React 차트의 성능이 저하될 수 있습니다.
예를 들어, 또는IgrCategoryChart 컨트롤에서IgrFinancialChart 다음 속성들을 변경하는 것:
또는 컨트롤에서 의IgrAxis 속성을 변경하는 경우IgrDataChart:
| 축 비주얼 | 축 속성 |
|---|---|
| 모든 축 시각적 요소 | Interval, MinorInterval |
| 축 눈금 | TickStroke , TickStrokeThickness, TickLength |
| 축 주요 격자선 | MajorStroke, MajorStrokeThickness |
| 축 보조 격자선 | MinorStroke, MinorStrokeThickness |
| 축 본선 | Stroke, StrokeThickness |
| 축 제목 | chartTitle, TitleAngle |
| 축 스트립 | Strip |
Performance in Financial Chart
위의 성능 지침 외에도, ReactIgrFinancialChart 제어는 성능에 영향을 미치는 다음과 같은 고유한 기능을 가지고 있습니다.
Y-Axis Mode
설정yAxisMode 선택권Numeric 더 높은 성능을 위해 권장되며, 다음에 사용하는 것보다 더 적은 연산이 필요합니다.PercentChange 모드.
Chart Panes
많은 창 사용indicatorTypes과overlayTypes 옵션을 설정하면 성능이 저하될 수 있으므로 몇 가지 재무 지표와 하나의 재무 오버레이를 사용하는 것이 좋습니다.
줌 슬라이더
옵션을 로zoomSliderType 설정하면None 차트 성능이 향상되고 다른 지표와 볼륨 창에 더 많은 수직 공간을 확보할 수 있습니다.
Volume Type
속성 설정은volumeType 차트 성능에 다음과 같은 영향을 미칠 수 있습니다:
None- 볼륨 창을 표시하지 않기 때문에 가장 저렴합니다.Line- 렌더링 비용이 더 많은 볼륨 유형이며, 많은 데이터 포인트를 렌더링하거나 많은 데이터 소스를 표시할 때 권장됩니다.Area- 부피 유형보다Line렌더링 비용이 더 많이 듭니다.Column- 볼륨 유형보다Area렌더링 비용이 더 높으며, 1-3개 주식의 볼륨 데이터를 렌더링할 때 권장됩니다.
Performance in Data Chart
일반적인 성능 지침 외에도, ReactIgrDataChart 제어는 성능에 영향을 미치는 다음과 같은 고유한 기능을 가지고 있습니다.
Axes Collection
축을 너무 많이 추가하는 것AxesIgrDataChart 컨트롤은 차트 성능을 저하시킬 것이며 저희는 권장합니다 축 공유 시리즈 사이에.
Series Collection
또한 ReactIgrSeries 컨트롤 컬렉션에IgrDataChart 많은 시리즈를 추가하면 각 시리즈마다 자체 렌더링 캔버스가 있어 렌더링 오버헤드가 증가합니다. 특히 10개 이상의 시리즈가 데이터 차트에 있다면 더욱 중요합니다. 여러 데이터 소스를 결합해 데이터 소스를 평탄화시키는 것을 권장합니다(데이터 구조 섹션 참조). 그리고 다음 시리즈의 조건부 스타일링 기능을 사용할 수 있습니다:
| 성능 저하 시나리오 | 조건부 스타일을 사용한 더 빠른 시나리오 |
|---|---|
10개 이상IgrLineSeries |
하나의IgrScatterLineSeries |
20개 이상IgrLineSeries |
하나의IgrScatterPolylineSeries |
10개 이상IgrScatterLineSeries |
하나의IgrScatterPolylineSeries |
10개 이상IgrPointSeries |
하나의IgrScatterSeries |
20개 이상IgrPointSeries |
하나의IgrHighDensityScatterSeries |
20개 이상IgrScatterSeries |
하나의IgrHighDensityScatterSeries |
10개 이상IgrAreaSeries |
하나의IgrScatterPolygonSeries |
10개 이상IgrColumnSeries |
하나의IgrScatterPolygonSeries |
Additional Resources
다음 항목에서 관련 차트 유형에 대한 자세한 내용을 확인할 수 있습니다.
- 영역 차트
- 바 차트
- 거품형 차트
- 기둥 차트
- 도넛 차트
- 파이 차트
- 분산형 차트
- 극좌표형 차트
- 방사형 차트
- 형상 차트
- 스플라인 차트
- 분산형 차트
- 누적 차트
- 단계 차트
- 주식 차트
- 차트 애니메이션
- 차트 주석
- 차트 하이라이트
- 차트 마커
- 차트 오버레이
- 차트 추세선
API References
다음 표에는 위 섹션에서 언급된 API 멤버가 나열되어 있습니다.