React 차트는 수백만 개의 데이터 포인트를 렌더링하고 몇 밀리초마다 업데이트하는 고성능을 위해 최적화되었습니다. 그러나 차트 성능에 영향을 미치는 여러 차트 기능이 있으며 애플리케이션에서 성능을 최적화할 때 고려해야 합니다. 이 주제에서는 React 차트가 애플리케이션에서 가능한 한 빨리 작동하도록 안내합니다.
React 차트 성능 예시
다음 예제는 React 차트의 두 가지 고성능 시나리오를 보여줍니다.
고빈도 React 차트
High-Frequency 시나리오에서 React Charts는 실시간으로 또는 지정된 밀리초 간격으로 업데이트되는 데이터 항목을 렌더링할 수 있습니다. 터치 장치에서 차트와 상호 작용하더라도 지연, 화면 깜박임 및 시각적 지연이 발생하지 않습니다. 다음 샘플은 High-Frequency 시나리오에서 IgrCategoryChart를 보여줍니다.
EXAMPLE
DATA
TSX
exportclassCategoryChartSharedData{
publicstatic generateItems(startValue: number, maxPoints: number, useShortLabels?: boolean): any[] {
const data: any[] = [];
let value = startValue;
for (let i = 0; i <= maxPoints; i++) {
value += Math.random() * 4.0 - 2.0;
const v = Math.round(value);
let l = i.toString();
if (useShortLabels) {
l = this.toShortString(i);
}
data.push({ Label: l, Value: v });
}
return data;
}
publicstatic getTemperatures(startValue: number, startYear: number, endYear: number): any[] {
const data: any[] = [];
let value = startValue;
for (let i = startYear; i <= endYear; i++) {
value += (Math.random() - 0.5) * 0.5;
const v = Math.abs(Math.round(value * 10) / 10);
data.push({ Label: i.toString(), Value: v });
}
return data;
}
publicstatic getLastItem(array: any[]): any {
if (array.length === 0) {
returnnull;
}
return array[array.length - 1];
}
publicstatic getNewItem(array: any[], index: number): any {
const lastItem = this.getLastItem(array);
const newValue = lastItem.Value + Math.random() * 4.0 - 2.0;
return { Label: index.toString(), Value: newValue };
}
publicstatic toShortString(largeValue: number): string {
let roundValue: number;
if (largeValue >= 1000000) {
roundValue = Math.round(largeValue / 100000) / 10;
return roundValue + "m";
}
if (largeValue >= 1000) {
roundValue = Math.round(largeValue / 100) / 10;
return roundValue + "k";
}
roundValue = Math.round(largeValue);
return roundValue + "";
}
publicstatic addDays(date: Date, days: number): Date {
date.setDate(date.getDate() + days);
return date;
}
}
ts
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import { IgrCategoryChart } from"@infragistics/igniteui-react-charts";
import { IgrCategoryChartModule } from"@infragistics/igniteui-react-charts";
import { CategoryChartSharedData } from'./CategoryChartSharedData';
IgrCategoryChartModule.register();
exportdefaultclass CategoryChartHighFrequency extendsReact.Component<any, any> {
public dataIndex: number = 0;
public dataPoints: number = 500;
public data: any[];
public refreshMilliseconds: number = 5;
public interval: number = -1;
public chart: IgrCategoryChart;
constructor(props: any) {
super(props);
this.onChartRef = this.onChartRef.bind(this);
this.onRefreshFrequencyChanged = this.onRefreshFrequencyChanged.bind(this);
this.onDataGenerateClick = this.onDataGenerateClick.bind(this);
this.onDataPointsChanged = this.onDataPointsChanged.bind(this);
this.onDataFeedClick = this.onDataFeedClick.bind(this);
this.data = CategoryChartSharedData.generateItems(100, this.dataPoints, false);
this.dataIndex = this.data.length;
this.state = {
dataFeedAction: "Start",
dataInfo: CategoryChartSharedData.toShortString(this.dataPoints),
dataPoints: this.dataPoints,
dataSource: this.data,
scalingRatio: window.devicePixelRatio,
refreshInterval: this.refreshMilliseconds,
refreshInfo: "5ms"
}
}
publicrender(): JSX.Element {
return (
<divclassName="container sample"><divclassName="options horizontal"><buttononClick={this.onDataFeedClick}>{this.state.dataFeedAction}</button><labelclassName="options-label">Refresh: </label><labelclassName="options-value">{this.state.refreshInfo}</label><inputclassName="options-slider"type="range"min="5"max="250"step="5"value={this.state.refreshInterval}onChange={this.onRefreshFrequencyChanged} /><buttononClick={this.onDataGenerateClick}>Generate</button><labelclassName="options-label">Data Points: </label><labelclassName="options-value">{this.state.dataInfo}</label><inputclassName="options-slider"type="range"min="100"max="2000"step="100"value={this.state.dataPoints}onChange={this.onDataPointsChanged} /></div><divclassName="container"style={{height: "calc(100% -45px)" }} ><IgrCategoryChartref={this.onChartRef}width="100%"height="100%"chartType="Line"dataSource={this.state.dataSource}yAxisExtent={40}xAxisEnhancedIntervalPreferMoreCategoryLabels="false"shouldConsiderAutoRotationForInitialLabels="false"shouldAutoExpandMarginForInitialLabels="false"crosshairsDisplayMode="None"autoMarginAndAngleUpdateMode="None"markerTypes="None" /></div></div>
);
}
public componentWillUnmount() {
if (this.interval >= 0) {
window.clearInterval(this.interval);
this.interval = -1;
}
}
public onChartRef(chart: IgrCategoryChart) {
if (!chart) { return; }
this.chart = chart;
this.onChartInit();
}
public onChartInit(): void {
this.setupInterval();
}
public onDataGenerateClick() {
this.data = CategoryChartSharedData.generateItems(100, this.dataPoints, false);
this.dataIndex = this.data.length;
this.setState({ dataSource: this.data });
}
public onDataFeedClick() {
letfeedAction = this.state.dataFeedAction;
if (feedAction === "Start") {
this.setState({ dataFeedAction: "Stop" });
}
else {
this.setState({ dataFeedAction: "Start" });
}
}
public onDataPointsChanged = (e: any) => {
letnum: number = parseInt(e.target.value, 10);
if (isNaN(num)) {
num = 10000;
}
if (num < 100) {
num = 100;
}
if (num >2000) {
num = 2000;
}
constinfo = CategoryChartSharedData.toShortString(num);
this.dataPoints = num;
this.setState({ dataPoints: num, dataInfo: info });
}
public ngOnDestroy(): void {
if (this.interval >= 0) {
window.clearInterval(this.interval);
this.interval = -1;
}
}
public onRefreshFrequencyChanged = (e: any) => {
letnum: number = parseInt(e.target.value, 10);
if (isNaN(num)) {
num = 10;
}
if (num < 10) {
num = 10;
}
if (num >500) {
num = 500;
}
this.refreshMilliseconds = num;
this.setState({ refreshInterval: num, refreshInfo: this.refreshMilliseconds + "ms" });
this.setupInterval();
}
public setupInterval(): void {
if (this.interval >= 0) {
window.clearInterval(this.interval);
this.interval = -1;
}
this.interval = window.setInterval(() => this.tick(),
this.refreshMilliseconds);
}
public tick(): void {
if (this.state.dataFeedAction === "Stop") {
this.dataIndex++;
constoldItem = this.data[0];
constnewItem = CategoryChartSharedData.getNewItem(this.data, this.dataIndex);
// updating data source and notifying category chartthis.data.push(newItem);
this.chart.notifyInsertItem(this.data, this.data.length - 1, newItem);
this.data.shift();
this.chart.notifyRemoveItem(this.data, 0, oldItem);
}
}
}
// rendering above class to the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CategoryChartHighFrequency/>);
tsx
이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
고용량 React 차트
대량 시나리오에서 React Charts는 100만 개의 데이터 포인트를 렌더링할 수 있으며, 최종 사용자가 확대/축소하거나 차트 콘텐츠를 탐색할 때 차트는 원활한 성능을 제공합니다. 다음 샘플은 대량 시나리오에서 IgrCategoryChart를 보여줍니다.
EXAMPLE
DATA
TSX
exportclassCategoryChartSharedData{
publicstatic generateItems(startValue: number, maxPoints: number, useShortLabels?: boolean): any[] {
const data: any[] = [];
let value = startValue;
for (let i = 0; i <= maxPoints; i++) {
value += Math.random() * 4.0 - 2.0;
const v = Math.round(value);
let l = i.toString();
if (useShortLabels) {
l = this.toShortString(i);
}
data.push({ Label: l, Value: v });
}
return data;
}
publicstatic getTemperatures(startValue: number, startYear: number, endYear: number): any[] {
const data: any[] = [];
let value = startValue;
for (let i = startYear; i <= endYear; i++) {
value += (Math.random() - 0.5) * 0.5;
const v = Math.abs(Math.round(value * 10) / 10);
data.push({ Label: i.toString(), Value: v });
}
return data;
}
publicstatic getLastItem(array: any[]): any {
if (array.length === 0) {
returnnull;
}
return array[array.length - 1];
}
publicstatic getNewItem(array: any[], index: number): any {
const lastItem = this.getLastItem(array);
const newValue = lastItem.Value + Math.random() * 4.0 - 2.0;
return { Label: index.toString(), Value: newValue };
}
publicstatic toShortString(largeValue: number): string {
let roundValue: number;
if (largeValue >= 1000000) {
roundValue = Math.round(largeValue / 100000) / 10;
return roundValue + "m";
}
if (largeValue >= 1000) {
roundValue = Math.round(largeValue / 100) / 10;
return roundValue + "k";
}
roundValue = Math.round(largeValue);
return roundValue + "";
}
publicstatic addDays(date: Date, days: number): Date {
date.setDate(date.getDate() + days);
return date;
}
}
ts
React 차트는 데이터 포인트 배열의 배열을 ItemsSource 속성에 바인딩하여 여러 데이터 소스의 렌더링을 지원하지만, 여러 데이터 소스가 단일 데이터 소스로 평면화되고 각 데이터 항목에 하나의 데이터 열이 아닌 여러 데이터 열이 포함되는 경우 차트가 훨씬 더 빠릅니다. 예를 들어:
런타임에 범례에 매핑된 시리즈나 데이터 항목의 제목이 자주 변경되는 경우 React 차트에 범례를 추가하면 성능이 저하될 수 있습니다.
차트 마커
React 차트에서 마커는 차트 성능 측면에서 특히 비쌉니다. 왜냐하면 차트의 레이아웃 복잡성을 높이고 특정 정보를 얻기 위해 데이터 바인딩을 수행하기 때문입니다. 또한 마커는 데이터 포인트가 많거나 바인딩된 데이터 소스가 많을 때 성능을 저하시킵니다. 따라서 마커가 필요하지 않으면 차트에서 제거해야 합니다.
이 코드 조각은 React 차트에서 마커를 제거하는 방법을 보여줍니다.
// on CategoryChart or FinancialChartthis.Chart.markerTypes.clear();
this.Chart.markerTypes.add(MarkerType.None);
// on LineSeries of DataChartthis.LineSeries.markerType = MarkerType.None;
ts
차트 해상도
resolution 속성을 더 높은 값으로 설정하면 성능이 향상되지만 플롯된 계열 선의 그래픽 충실도가 낮아집니다. 따라서 충실도가 허용되지 않을 때까지 늘릴 수 있습니다.
이 코드 조각은 React 차트의 해상도를 낮추는 방법을 보여줍니다.
// on CategoryChart or FinancialChart:this.Chart.Resolution = 10;
// on LineSeries of DataChart:this.LineSeries.Resolution = 10;
ts
데이터 포인트 사이의 시간 범위를 기준으로 데이터 포인트 사이의 공백이 중요하지 않은 경우 DateTime 지원과 함께 x축을 사용하지 않는 것이 좋습니다. 대신, 데이터를 통합하는 방식이 더 효율적이기 때문에 순서/범주 축을 사용해야 합니다. 또한 순서/범주 축은 시간 기반 X축처럼 데이터에 대한 정렬을 수행하지 않습니다.
IgrCategoryChart는 이미 순서/범주 축을 사용하므로 해당 속성을 변경할 필요가 없습니다.
기본적으로 React 차트는 데이터 범위에 따라 yAxisInterval 자동으로 계산합니다. 따라서 축 간격을 특히 작은 값으로 설정하지 않는 것이 좋으며, 너무 많은 축 그리드선과 축 레이블을 렌더링하지 않도록 해야 합니다. 또한 많은 축 그리드선이나 축 레이블이 필요하지 않은 경우 yAxisInterval 속성을 자동으로 계산된 축 간격보다 더 큰 값으로 늘리는 것을 고려할 수 있습니다.
하지만 React 차트는 yAxisAbbreviateLargeNumbers true로 설정된 경우 축 레이블에 표시된 큰 숫자(예: 10,000+)의 약어를 지원합니다. 대신 데이터 항목에서 큰 값을 공통 인수로 나누어 사전 처리한 다음 yAxisTitle 데이터 값을 약어하는 데 사용되는 인수를 나타내는 문자열로 설정하는 것이 좋습니다.
이 코드 조각은 React 차트에서 축 제목을 설정하는 방법을 보여줍니다.
<IgrCategoryChartyAxisTitle="In millions of Dollars" /><IgrFinancialChartyAxisTitle="In millions of Dollars" /><IgrDataChart><IgrNumericYAxistitle="In millions of Dollars" /></IgrDataChart>tsx
축 레이블 범위
런타임 시 React 차트는 가장 긴 값을 가진 레이블을 기준으로 y축의 레이블 범위를 조정합니다. 이는 데이터 범위가 변경되고 레이블을 자주 업데이트해야 하는 경우 차트 성능을 저하시킬 수 있습니다. 따라서 차트 성능을 개선하기 위해 디자인 타임에 레이블 범위를 설정하는 것이 좋습니다.
다음 코드 조각은 React 차트에서 y축 레이블에 대한 고정 범위를 설정하는 방법을 보여줍니다.
Column- 볼륨 유형보다 Area 렌더링 비용이 많이 들며 1-3 주식의 볼륨 데이터를 렌더링 할 때 권장됩니다.
데이터 차트의 성능
일반적인 성능 지침 외에도 React IgrDataChart 컨트롤은 성능에 영향을 미치는 다음과 같은 고유한 기능을 갖추고 있습니다.
축 컬렉션
축을 너무 많이 추가하면 Axes의 컬렉션 IgrDataChart 컨트롤을 사용하면 차트 성능이 저하되므로 권장됩니다. 축 공유 시리즈 사이.
시리즈 컬렉션
또한 React IgrDataChart 컨트롤의 IgrSeries 컬렉션에 많은 시리즈를 추가하면 각 시리즈가 자체 렌더링 캔버스를 가지기 때문에 렌더링 오버헤드가 추가됩니다. 이는 데이터 차트에 10개가 넘는 시리즈가 있는 경우 특히 중요합니다. 여러 데이터 소스를 결합해 데이터 소스를 평평하게 만든 다음(데이터 구조 섹션 참조) 다음 시리즈의 조건부 스타일링 기능을 사용하는 것이 좋습니다.
