Angular 차트 추세선

    Ignite UI for Angular에서 추세선은 추세를 식별하거나 데이터에서 패턴을 찾는 데 도움이 됩니다. 추세선은 항상 차트에 바인딩된 데이터 포인트 앞에 렌더링되며 IgxCategoryChartComponent, IgxFinancialChartComponent 및 IgxDataChartComponent에서 지원됩니다(스택 시리즈, 모양 시리즈 및 범위 시리즈 제외).

    추세선은 기본적으로 꺼져 있지만 trendLineType 속성을 설정하여 활성화할 수 있습니다. 또한 브러시, 기간 및 두께와 같은 추세선의 여러 모양 속성을 수정할 수 있습니다.

    추세선에는 활성화된 후 대시 배열을 적용할 수 있는 기능도 있습니다. TrendLineDashArray 속성을 숫자 배열로 설정하면 됩니다. 숫자형 배열은 추세선 대시의 길이를 나타냅니다.

    Angular 차트 추세선 예

    다음 샘플은 IgxFinancialChartComponent 2013년에서 2017년 사이의 Microsoft의 주식 추세를 QuinticFit 추세선이 처음 적용된 상태로 보여 줍니다. 적용되는 추세선의 유형을 변경할 수 있는 드롭다운이 있으며 가능한 모든 추세선 유형이 해당 드롭다운에 나열됩니다.

    Angular 차트 추세선 대시 배열 예

    다음 샘플에서는 IgxDataChartComponent 표시 IgxFinancialPriceSeriesComponent와 함께 쿼틱핏(QuarticFit)를 통해 적용된 점선 추세선 trendLineDashArray 재산:

    Angular 차트 추세선 레이어

    대상 IgxTrendLineLayerComponent 계열에 대한 단일 추세선 유형을 표시하도록 설계된 계열 유형입니다. 이 기능과 기존 계열 유형의 기존 추세선 기능의 차이점은 계 IgxTrendLineLayerComponent 열 유형이므로 차트 컬렉션에 IgxSeriesComponent 둘 이상의 추세선을 추가하여 동일한 계열에 여러 추세선을 연결할 수 있다는 것입니다. 이전에는 불가능했던 추세선을 범례에 표시할 수도 있습니다.

    Trendline Layer Usage

    제대로 IgxTrendLineLayerComponent 작동하려면 a targetSeries와 a trendLineType가 제공되어야 합니다. 사용 가능한 다양한 추세선 유형은 계열에서 사용할 수 있는 추세선과 동일합니다.

    범례에 표시 IgxTrendLineLayerComponent 하려면 속성을 로 true 설정 UseLegend 하면 됩니다.

    Styling the Trendline Layer

    기본적으로 파 IgxTrendLineLayerComponent 선과 동일한 색상 targetSeries으로 렌더링됩니다. 의 다양한 스타일 속성을 사용하여 구성할 수 있습니다. IgxTrendLineLayerComponent​

    그려진 추세선의 색상을 변경하려면 Brush 재산. 또는 UseIndex property를 true, 차트의 brushes 팔레트 IgxTrendLineLayerComponent는 차트의 IgxSeriesComponent 수집.

    또한 IgxTrendLineLayerComponent를 사용하여 나타납니다. AppearanceMode 그리고 ShiftAmount 속성. 이 ShiftAmount-1.0에서 1.0 사이의 값을 사용하여 "Shift"로 끝나는 옵션에 적용할 "shift"의 양을 결정합니다.

    속성에 대한 옵션은 다음과 같습니다 AppearanceMode.

    • Auto: 기본적으로 DashPattern 열거형으로 설정됩니다.
    • BrightnessShift: 추세선은 브러시를 targetSeries 가져와 제공된 ShiftAmount 내용에 따라 밝기를 수정합니다.
    • DashPattern: 추세선이 점선으로 나타납니다. 대시의 빈도는 DashArray 속성 IgxTrendLineLayerComponent.
    • OpacityShift: 추세선은 브러시를 targetSeries 가져와 제공된 ShiftAmount 내용에 따라 불투명도를 수정합니다.
    • SaturationShift: 추세선은 브러시를 targetSeries 가져와 제공된 ShiftAmount 것을 기반으로 채도를 수정합니다.

    Additional Resources

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

    API References

    ​IgxCategoryChartComponent 및 IgxFinancialChartComponent 구성 요소는 다음 API 속성을 공유합니다.

    ​IgxDataChartComponent 구성 요소에서 대부분의 계열 유형에는 다음과 같은 API 속성이 있습니다.