Angular 버블 차트

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

Angular Bubble Chart Example

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

Angular Bubble Chart with Single Series

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

Angular Bubble Chart with Multiple Series

Angular Bubble Chart에서 여러 데이터 소스 바인딩은 각각의 새 데이터 소스를 다음으로 설정하여 작동합니다. ItemsSource 추가 속성 IgxBubbleSeriesComponent, 아래 예와 같이:

Angular Bubble Chart Styling

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

Additional Resources

• 분산형 차트
• 형상 차트

API References

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

• IgxDataChartComponent
• IgxBubbleSeriesComponent
• IgxScatterSeriesComponent
• ItemsSource
• fillMemberPath
• fillScale
• markerType
• markerBrush
• markerOutline
• markerThickness
• radiusScale
• radiusMemberPath
• xMemberPath
• yMemberPath