Angular 차트 추세선

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

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

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

    Angular 차트 추세선 예

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

    Angular 차트 추세선 대시 배열 예

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

    Angular 차트 추세선 레이어

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

    Trendline Layer Usage

    제대로 TrendLineLayer 작동하려면 a TargetSeries와 a trendLineType가 제공되어야 합니다. 사용할 수 있는 다양한 추세선 유형은 시리즈에서 사용할 수 있는 추세선과 동일합니다.

    범례에 표시하려면 TrendLineLayer 속성을 다음과 true 같이 설정하면 UseLegend 됩니다.

    Styling the Trendline Layer

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

    그려진 추세선의 색상을 변경하려면 brush 재산. 또는 다음을 설정할 수도 있습니다. UseIndex 속성을 true, 차트의 brushes palette 는 TrendLineLayer 차트의 IgxSeriesComponent 수집.

    또한 및 ShiftAmount 속성을 사용하여 표시되는 TrendLineLayer 방식을 수정할 수 있습니다 AppearanceMode. -ShiftAmount 1.0에서 1.0 사이의 값을 사용하여 "Shift"로 끝나는 옵션에 적용할 "shift"의 양을 결정합니다.

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

    • Auto: 기본적으로 DashPattern 열거형으로 설정됩니다.
    • BrightnessShift: 추세선은 브러시를 TargetSeries 가져와서 제공된 ShiftAmount 밝기에 따라 밝기를 수정합니다.
    • DashPattern: 추세선이 파선으로 표시됩니다. 대시의 빈도는 다음을 사용하여 수정할 수 있습니다. dashArray 속성을 TrendLineLayer.
    • OpacityShift: 추세선은 브러시를 TargetSeries 가져와 제공된 ShiftAmount 브러시에 따라 불투명도를 수정합니다.
    • SaturationShift: 추세선은 브러시를 TargetSeries 가져와 제공된 ShiftAmount 것에 따라 채도를 수정합니다.

    Additional Resources

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

    API References

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

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