Angular 스플라인 차트

    Ignite UI for Angular 스플라인 차트은 스플라인의 부드러운 곡선으로 연결된 점의 모음으로 렌더링되는 범주 차트 그룹에 속합니다. 스플라인 차트은 플롯된 값의 합계를 표시하여 일정 기간 동안의 변화량을 강조하거나 여러 항목을 비교하고 전체에 대한 부분의 관계를 비교합니다. 스플라인 차트과 모든 면에서 동일합니다. 선형 차트와 모든 면에서 동일하지만 데이터 포인트를 연결하는 선에 스플라인 보간 및 평활화가 적용되어 데이터 표시가 개선되었습니다.

    Angular Spline Chart Example

    다음 예제에서는 데이터를 바인딩하고 속성을 Spline enum으로 설정하여 chartType 컨트롤에서 IgxCategoryChartComponent Angular 스플라인 차트 만드는 방법을 보여 줍니다.

    Angular Spline Chart with Single Series

    스플라인 차트 아래 예와 같이 2009년부터 10년 동안 유럽에서 생산된 재생 가능한 전기량과 같이 시간에 따른 값의 변화를 표시하는 데 자주 사용됩니다.

    아래 예제와 같이 데이터를 바인딩하고 속성을 로 설정하여 chartType 컨트롤에서 IgxCategoryChartComponent 이러한 유형의 차트를 만들 수 있습니다. Spline​

    Angular Spline Chart with Multiple Series

    스플라인 차트 사용하면 여러 계열을 결합하고 시간에 따른 변화를 비교하거나 확인할 수 있습니다. 우리가 해야 할 일은 중국과 미국의 데이터가 포함된 데이터 소스에 바인딩하는 것뿐입니다. 그러면 차트가 추가 데이터에 맞게 자동으로 업데이트됩니다.

    아래 예제와 같이 데이터를 바인딩하고 속성을 로 설정하여 chartType 컨트롤에서 IgxCategoryChartComponent 이러한 유형의 차트를 만들 수 있습니다. Spline​

    Angular Spline Chart Styling

    다른 시리즈 합성과 같은 더 많은 기능을 갖춘 스플라인 차트 필요한 경우 아래 설명된 대로 마커, 마커 브러시, 마커 윤곽선, 시리즈 브러시 및 시리즈 윤곽선을 구성할 수 있습니다.

    아래 예제와 같이 데이터를 바인딩하고 속성을 로 설정하여 chartType 컨트롤에서 IgxCategoryChartComponent 이러한 유형의 차트를 만들 수 있습니다. Spline​

    Advanced Types of Spline Charts

    다음 섹션에서는 단순화된 API를 사용하여 IgxDataChartComponent 컨트롤 대신 IgxCategoryChartComponent 컨트롤을 사용하여 생성할 수 있는 고급 유형의 Angular 스플라인 차트에 대해 설명합니다.

    Angular Stacked Spline Chart

    누적 스플라인 차트 아래 예에서 볼 수 있듯이 지역 간 몇 년 동안 생산된 재생 가능한 전기량과 같이 시간에 따른 값의 변화를 표시하는 데 자주 사용됩니다.

    아래 예와 같이 데이터를 IgxStackedSplineSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

    Angular Stacked 100% Spline Chart

    누적 100% 스플라인 차트 y축 값 처리를 제외하고 모든 측면에서 누적 스플라인 차트와 동일합니다. 100% 누적 스플라인 차트 데이터를 직접 표시하는 대신 데이터 포인트의 모든 값 합계에 대한 백분율로 데이터를 표시합니다. 아래 예는 태블릿, 휴대폰, 개인용 컴퓨터를 통한 부서별 온라인 쇼핑 트래픽에 대한 연구를 보여줍니다.

    아래 예와 같이 데이터를 IgxStacked100SplineSeriesComponent에 바인딩하여 IgxDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

    Additional Resources

    다음 항목에서 관련 차트 유형에 대한 자세한 내용을 확인할 수 있습니다.

    API References

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

    차트 종류 컨트롤 이름 API 회원
    운형자 IgxCategoryChartComponent chartType = Spline
    누적 스플라인 IgxDataChartComponent IgxStackedSplineSeriesComponent
    스택형 100% 스플라인 IgxDataChartComponent IgxStacked100SplineSeriesComponent