Blazor 차트 성능
Blazor 차트는 수백만 개의 데이터 요소를 렌더링하고 몇 밀리초마다 업데이트하는 고성능에 최적화되어 있습니다. 그러나 차트 성능에 영향을 미치는 여러 차트 기능이 있으며 애플리케이션의 성능을 최적화할 때 이러한 기능을 고려해야 합니다. 이 항목에서는 Blazor 차트가 애플리케이션에서 최대한 빠르게 작동하도록 안내합니다.
Blazor Chart Performance Examples
다음 예제에서는 Blazor 차트의 두 가지 고성능 시나리오를 보여줍니다.
Blazor Chart with High-Frequency
빈도가 높은 시나리오에서 Blazor 차트는 실시간으로 또는 지정된 밀리초 간격으로 업데이트되는 데이터 항목을 렌더링할 수 있습니다. 터치 장치에서 차트와 상호 작용하는 경우에도 지연, 화면 깜박임 및 시각적 지연이 발생하지 않습니다. 다음 샘플은 고주파수 시나리오의 IgbCategoryChart 보여줍니다.
Blazor Chart with High-Volume
대용량 시나리오에서 Blazor 차트는 최종 사용자가 차트 콘텐츠를 확대/축소하거나 탐색하려고 할 때 차트가 계속 원활한 성능을 제공하는 동안 백만 개의 데이터 포인트를 렌더링할 수 있습니다. 다음 샘플은 대용량 시나리오의 IgbCategoryChart 보여줍니다.
General Performance Guidelines
이 섹션에는 Blazor 차트의 오버헤드 및 처리 업데이트에 추가되는 지침과 차트 기능이 나열되어 있습니다.
Data Size
많은 수의 데이터 포인트(예: 10,000개 이상)가 있는 데이터 소스를 플롯해야 하는 경우 해당 목적을 위해 특별히 설계된 다음 유형의 계열 중 하나와 함께 Blazor IgbDataChart 사용하는 것이 좋습니다.
- 카테고리 분산형 차트 또는 분산형 마커 차트 대신 분산형 HD 차트
- 범주 형 선형 차트 또는 분산 선형 차트 대신 분산형 폴리선 차트
- 범주 영역 차트 또는 기둥 차트 대신 분산형 다각형 차트
Data Structure
Blazor 차트는 데이터 요소 배열의 배열을 DataSource 속성에 바인딩하여 여러 데이터 소스의 렌더링을 지원합니다. 여러 데이터 소스가 각 데이터 항목에 하나의 데이터 열이 아닌 여러 데이터 열이 포함된 단일 데이터 소스로 평면화되면 차트의 속도가 훨씬 빨라집니다. 예를 들어:
this.CategoryChart.DataSource = FlattenDataSource.Create();
this.FinancialChart.DataSource = FlattenDataSource.Create();
public static class FlattenDataSource
{
public static List<FlattenDataItem> Create() {
var data = new List<FlattenDataItem>() {
new FlattenDataItem { Year = "1996", USA = 148, CHN = 110 },
new FlattenDataItem { Year = "2000", USA = 142, CHN = 115 },
};
return data;
}
public class FlattenDataItem
{
public int USA { get; set; }
public int CHN { get; set; }
public int Year { get; set; }
}
}
// instead of this data structure:
public static class MultiDataSources
{
public static List<MultiDataItem> Create() {
var dataSource1 = new List<MultiDataItem>() {
new MultiDataItem { Year = "1996", Value = 148 },
new MultiDataItem { Year = "2000", Value = 142 },
};
var dataSource2 = new List<MultiDataItem>() {
new MultiDataItem { Year = "1996", Value = 110 },
new MultiDataItem { Year = "2000", Value = 115 },
};
var multipleSources = new List<List<MultiDataItem>>();
multipleSources.Add(dataSource1);
multipleSources.Add(dataSource2);
return multipleSources;
}
public class MultiDataItem
{
public int Value { get; set; }
public int Year { get; set; }
}
}
Data Filtering
Blazor IgbCategoryChart 및 IgbFinancialChart 컨트롤에는 데이터를 분석하고 차트 시리즈를 생성하는 기본 제공 데이터 어댑터가 있습니다. 그러나 실제로 렌더링하려는 데이터 열만 필터링하기 위해 IncludedProperties 및 ExcludedProperties 사용하면 더 빠르게 작동합니다. 예를 들어,
this.Chart.IncludedProperties = new string[] { "Year", "USA", "RUS" };
this.Chart.ExcludedProperties = new string[] { "CHN", "FRN", "GER" };
Chart Performance Guidelines
Chart Types
선형 차트와 같은 간단한 차트 유형은 데이터 포인트 간 스플라인 선의 복잡한 보간으로 인해 스플라인 차트 사용하는 것보다 성능이 더 빠릅니다. 따라서 더 빠르게 렌더링되는 차트 유형을 선택하려면 Blazor IgbCategoryChart 또는 IgbFinancialChart 컨트롤의 ChartType 속성을 사용해야 합니다. 또는 Blazor IgbDataChart 컨트롤에서 계열 유형을 더 빠른 계열로 변경할 수 있습니다.
다음 표에는 각 차트 그룹의 가장 빠른 성능부터 느린 성능 순으로 차트 유형이 나열되어 있습니다.
* 분산형 다각형 차트 및 분산형 다중선 차트는 차트에 바인딩된 데이터 소스가 많은 경우 나머지 차트보다 성능이 더 좋습니다. 자세한 내용은 시리즈 컬렉션 섹션을 참조하세요. 그렇지 않으면 다른 차트 유형이 더 빠릅니다.
차트 애니메이션
차트 애니메이션을 활성화하면 전환 애니메이션을 재생하는 동안 Blazor 차트의 최종 렌더링 시리즈가 약간 지연됩니다.
차트 주석
콜아웃 주석, 십자선 주석 또는 최종 값 주석과 같은 차트 주석을 활성화하면 Blazor 차트의 성능이 약간 저하됩니다.
차트 하이라이트
차트 강조 표시를 활성화하면 Blazor 차트의 성능이 약간 저하됩니다.
Chart Legend
시리즈 제목이나 범례에 매핑된 데이터 항목이 런타임 시 자주 변경되는 경우 Blazor 차트에 범례를 추가하면 성능이 저하될 수 있습니다.
차트 마커
Blazor 차트에서 마커는 차트의 레이아웃 복잡성을 추가하고 특정 정보를 얻기 위해 데이터 바인딩을 수행하므로 차트 성능과 관련하여 특히 비용이 많이 듭니다. 또한 마커는 데이터 포인트가 많거나 바인딩된 데이터 소스가 많은 경우 성능을 저하시킵니다. 따라서 마커가 필요하지 않은 경우 차트에서 제거해야 합니다.
이 코드 조각은 Blazor 차트에서 마커를 제거하는 방법을 보여줍니다.
// 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 속성을 더 높은 값으로 설정하면 성능이 향상되지만 플롯된 계열 선의 그래픽 충실도가 낮아집니다. 따라서 충실도가 허용되지 않을 때까지 늘릴 수 있습니다.
이 코드 조각은 Blazor 차트의 해상도를 줄이는 방법을 보여줍니다.
// on CategoryChart or FinancialChart:
this.Chart.Resolution = 10;
this.Chart.Resolution = 10;
// on LineSeries of DataChart:
this.LineSeries.Resolution = 10;
차트 오버레이
차트 오버레이를 활성화하면 Blazor 차트의 성능이 약간 저하됩니다.
차트 추세선
차트 추세선을 활성화하면 Blazor 차트의 성능이 약간 저하됩니다.
축 유형
데이터 포인트 사이의 시간 범위를 기준으로 데이터 포인트 사이의 공백이 중요하지 않은 경우 DateTime 지원과 함께 x축을 사용하지 않는 것이 좋습니다. 대신, 데이터를 통합하는 방식이 더 효율적이기 때문에 순서/범주 축을 사용해야 합니다. 또한 순서/범주 축은 시간 기반 X축처럼 데이터에 대한 정렬을 수행하지 않습니다.
[!Note] The
IgbCategoryChartalready uses ordinal/category axis so there is no need to change its properties.
이 코드 조각은 IgbFinancialChart 및 IgbDataChart 컨트롤에서 x축을 순서/범주로 지정하는 방법을 보여줍니다.
<IgbFinancialChart XAxisMode="FinancialChartXAxisMode.Ordinal"/>
<IgbDataChart >
<IgbCategoryXAxis Label="Time" />
</IgbDataChart>
Axis Intervals
기본적으로 Blazor 차트는 데이터 범위를 기반으로 YAxisInterval 자동으로 계산합니다. 따라서 축 격자선과 축 레이블이 너무 많이 렌더링되는 것을 방지하려면 특히 축 간격을 작은 값으로 설정하지 않아야 합니다. 또한 많은 축 격자선이나 축 레이블이 필요하지 않은 경우 YAxisInterval 속성을 자동으로 계산된 축 간격보다 큰 값으로 늘리는 것이 좋습니다.
[!Note] We do not recommend setting axis minor interval as it will decrease chart performance.
이 코드 조각은 Blazor 차트에서 축 주요 간격을 설정하는 방법을 보여줍니다.
<IgbCategoryChart XAxisInterval="5" YAxisInterval="50"/>
<IgbFinancialChart XAxisInterval="5" YAxisInterval="50"/>
<IgbDataChart >
<IgbCategoryXAxis Name="xAxis" Interval="5" />
<IgbNumericYAxis Name="yAxis" Interval="50" />
</IgbDataChart>
Axis Scale
성능을 높이려면 YAxisIsLogarithmic 속성을 false로 설정하는 것이 좋습니다. 로그 눈금으로 축 범위와 축 레이블 값을 계산하는 것보다 필요한 작업 수가 적기 때문입니다.
Axis Labels Visibility
마커와 마찬가지로 축 레이블도 템플릿과 바인딩을 사용하기 때문에 비용이 많이 들고 데이터 컨텍스트가 자주 변경될 수 있습니다. 레이블을 사용하지 않는 경우 레이블을 숨기거나 간격을 늘려 축 레이블 수를 줄여야 합니다.
이 코드 조각은 Blazor 차트에서 축 레이블을 숨기는 방법을 보여줍니다.
<IgbCategoryChart
XAxisLabelVisibility="Visibility.Collapsed"
YAxisLabelVisibility="Visibility.Collapsed">
</IgbCategoryChart>
<IgbFinancialChart
XAxisLabelVisibility="Visibility.Collapsed"
YAxisLabelVisibility="Visibility.Collapsed">
</IgbFinancialChart>
<IgbDataChart>
<IgbCategoryXAxis Name="xAxis" LabelVisibility="Visibility.Collapsed" />
<IgbNumericYAxis Name="yAxis" LabelVisibility="Visibility.Collapsed" />
</IgbDataChart>
Axis Labels Abbreviation
하지만 Blazor 차트는 YAxisAbbreviateLargeNumbers true로 설정된 경우 축 레이블에 표시되는 큰 숫자(예: 10,000+)의 약어를 지원합니다. 대신 데이터 항목의 큰 값을 공통 요소로 나눈 다음 YAxisTitle 데이터 값을 축약하는 데 사용되는 요소를 나타내는 문자열로 설정하여 사전 처리하는 것이 좋습니다.
이 코드 조각은 Blazor 차트에서 축 제목을 설정하는 방법을 보여줍니다.
<IgbCategoryChart YAxisTitle="In millions of Dollars"/>
<IgbFinancialChart YAxisTitle="In millions of Dollars"/>
<IgbDataChart >
<IgbNumericYAxis Title="In millions of Dollars" />
</IgbDataChart>
Axis Labels Extent
런타임 시 Blazor 차트는 값이 가장 긴 레이블을 기준으로 y축의 레이블 범위를 조정합니다. 데이터 변경 범위와 레이블을 자주 업데이트해야 하는 경우 차트 성능이 저하될 수 있습니다. 따라서 차트 성능을 향상시키기 위해서는 디자인 타임에 레이블 범위를 설정하는 것이 좋습니다.
다음 코드 조각은 Blazor 차트의 y축 레이블에 대한 고정 범위를 설정하는 방법을 보여줍니다.
<IgbCategoryChart XAxisLabelExtent="50" YAxisLabelExtent="50"/>
<IgbFinancialChart XAxisLabelExtent="50" YAxisLabelExtent="50"/>
<IgbDataChart>
<IgbCategoryXAxis Name="xAxis" LabelExtent="50" />
<IgbNumericYAxis Name="yAxis" LabelExtent="50" />
</IgbDataChart>
Axis Other Visuals
추가 축 시각적 개체(예: 축 제목)를 활성화하거나 기본값을 변경하면 Blazor 차트의 성능이 저하될 수 있습니다.
예를 들어 IgbCategoryChart 또는 IgbFinancialChart 컨트롤에서 다음 속성을 변경합니다.
또는 IgbDataChart 컨트롤에서 IgbAxis의 속성을 변경합니다.
| 축 비주얼 | 축 속성 |
|---|---|
| 모든 축 시각적 요소 | Interval, MinorInterval |
| 축 눈금 | TickStroke , TickStrokeThickness, TickLength |
| 축 주요 격자선 | MajorStroke, MajorStrokeThickness |
| 축 보조 격자선 | MinorStroke, MinorStrokeThickness |
| 축 본선 | Stroke, StrokeThickness |
| 축 제목 | ChartTitle, TitleAngle |
| 축 스트립 | Strip |
Performance in Financial Chart
위의 성능 지침 외에도 Blazor IgbFinancialChart 컨트롤에는 성능에 영향을 미치는 다음과 같은 고유한 기능이 있습니다.
Y-Axis Mode
설정 YAxisMode 옵션 Numeric를 사용하는 것보다 더 적은 작업이 필요하므로 더 높은 성능을 위해 권장됩니다. PercentChange 방법.
Chart Panes
IndicatorTypes 및 OverlayTypes 옵션을 사용하여 많은 창을 설정하면 성능이 저하될 수 있으므로 몇 가지 재무 지표와 하나의 재무 오버레이를 사용하는 것이 좋습니다.
Zoom Slider
ZoomSliderType 옵션을 None으로 설정하면 차트 성능이 향상되고 다른 표시기와 볼륨 창에 더 많은 수직 공간이 가능해집니다.
Volume Type
VolumeType 속성을 설정하면 차트 성능에 다음과 같은 영향을 미칠 수 있습니다.
None- 볼륨 창을 표시하지 않으므로 비용이 가장 저렴합니다.Line- 렌더링 비용이 더 많이 드는 볼륨 유형이므로 많은 데이터 포인트를 렌더링하거나 많은 데이터 소스를 그릴 때 권장됩니다.Area-Line볼륨 유형보다 렌더링 비용이 더 많이 듭니다.IgbColumn-Area볼륨 유형보다 렌더링 비용이 더 많이 들며 1~3개 주식의 볼륨 데이터를 렌더링할 때 권장됩니다.
Performance in Data Chart
일반 성능 지침 외에도 Blazor IgbDataChart 컨트롤에는 성능에 영향을 미치는 다음과 같은 고유한 기능이 있습니다.
Axes Collection
IgbDataChart 컨트롤의 Axes 컬렉션에 너무 많은 축을 추가하면 차트 성능이 저하되므로 시리즈 간에 축을 공유하는 것이 좋습니다.
Series Collection
또한 Blazor IgbDataChart 컨트롤의 Series 컬렉션에 많은 시리즈를 추가하면 각 시리즈마다 자체 렌더링 캔버스가 있으므로 렌더링에 오버헤드가 추가됩니다. 이는 데이터 차트에 10개 이상의 시리즈가 있는 경우 특히 중요합니다. 여러 데이터 소스를 평면화된 데이터 소스로 결합한 후(데이터 구조 섹션 참조) 다음 시리즈의 조건부 스타일 지정 기능을 사용하는 것이 좋습니다.
| 성능 저하 시나리오 | 조건부 스타일을 사용한 더 빠른 시나리오 |
|---|---|
10개 이상IgbLineSeries |
하나의IgbScatterLineSeries |
20개 이상IgbLineSeries |
하나의IgbScatterPolylineSeries |
10개 이상IgbScatterLineSeries |
하나의IgbScatterPolylineSeries |
10개 이상IgbPointSeries |
하나의IgbScatterSeries |
20개 이상IgbPointSeries |
하나의IgbHighDensityScatterSeries |
20개 이상IgbScatterSeries |
하나의IgbHighDensityScatterSeries |
10개 이상IgbAreaSeries |
하나의IgbScatterPolygonSeries |
10개 이상IgbColumnSeries |
하나의IgbScatterPolygonSeries |
Additional Resources
다음 항목에서 관련 차트 유형에 대한 자세한 내용을 확인할 수 있습니다.
- 영역 차트
- 바 차트
- 거품형 차트
- 기둥 차트
- 도넛 차트
- 파이 차트
- 분산형 차트
- 극좌표형 차트
- 방사형 차트
- 형상 차트
- 스플라인 차트
- 분산형 차트
- 누적 차트
- 단계 차트
- 주식 차트
- 차트 애니메이션
- 차트 주석
- 차트 하이라이트
- 차트 마커
- 차트 오버레이
- 차트 추세선
API References
다음 표에는 위 섹션에서 언급된 API 멤버가 나열되어 있습니다.