Web Components 거품형 차트

Ignite UI for Web Components 여러 개별 데이터 계열의 항목 간 관계를 나타내거나 x 및 y 좌표를 사용하여 데이터 항목을 표시하기 위해 가변 배율이 있는 마커를 표시하는 분산형 차트 유형입니다. 데이터 포인트의 이러한 좌표는 두 개의 숫자 데이터 열에 의해 결정됩니다. 거품형 차트는 고르지 않은 간격이나 데이터 클러스터에 주목합니다. 이 차트는 과학 데이터를 플롯하는 데 자주 사용되며 수집된 데이터와 예측 결과의 편차를 강조할 수 있습니다. 거품형 차트에는 분산형 마커 차트의 많은 특성이 있지만 다양한 반경 눈금 크기를 가질 수 있는 옵션이 있습니다.

Web Components Bubble Chart Example

아래 예제와 같이 IgcBubbleSeriesComponent와 두 개의 숫자 축을 사용하여 IgcDataChartComponent 컨트롤에서 Ignite UI for Web Components 생성할 수 있습니다.

Web Components Bubble Chart with Single Series

데이터를 다음에 바인딩할 수 있습니다. ItemsSource의 자산 IgcBubbleSeriesComponent 이를 사용하여 데이터 열을 매핑합니다. xMemberPath, yMemberPath, radiusMemberPath 속성은 아래 예와 같습니다.

Web Components Bubble Chart with Multiple Series

Web Components 거품형 차트에서 여러 데이터 소스 바인딩은 각각의 새 데이터 소스를 다음으로 설정하여 작동합니다. ItemsSource 추가 속성 IgcBubbleSeriesComponent, 아래 예와 같이:

Web Components Bubble Chart Styling

Web Components 거품형 차트에서는 markerType 속성을 사용하여 거품 마커의 모양을, radiusScale 속성을 사용하여 크기를, markerBrush, markerOutline, markerThickness 속성을 사용하여 모양을 사용자 정의할 수 있습니다. 또한 fillMemberPath 및 fillScale 속성을 사용하여 데이터 열을 기반으로 거품 마커의 색상을 지정할 수도 있습니다. 이 예에서는 위 속성의 사용법을 보여줍니다.

Additional Resources

• 분산형 차트
• 형상 차트

API References

다음 표에는 위 섹션에서 언급된 API 멤버가 나열되어 있습니다.

• IgcDataChartComponent
• IgcBubbleSeriesComponent
• IgcScatterSeriesComponent
• ItemsSource
• fillMemberPath
• fillScale
• markerType
• markerBrush
• markerOutline
• markerThickness
• radiusScale
• radiusMemberPath
• xMemberPath
• yMemberPath