Angular 레이아웃

    모든 Ignite UI for Angular 위치와 같은 많은 축 레이아웃 옵션을 구성하는 옵션과 시리즈 간에 축을 공유하거나 동일한 차트에 여러 축을 갖는 기능이 포함되어 있습니다. 이러한 기능은 아래 제공된 예에서 설명됩니다.

    [!Note] the following examples can be applied to IgxCategoryChartComponent as well as IgxFinancialChartComponent controls.

    Axis Locations Example

    모든 축에 대해 차트 그림 영역과 관련하여 축 위치를 지정할 수 있습니다. Angular 차트의 xAxisLabelLocation 속성을 사용하면 x축 선과 해당 레이블을 그림 영역 위 또는 아래에 배치할 수 있습니다. 마찬가지로 yAxisLabelLocation 속성을 사용하여 플롯 영역의 왼쪽 또는 오른쪽에 y축을 배치할 수 있습니다.

    다음 예에서는 2009년 이후 생산된 재생 가능 전기량을 선형 차트로 표시합니다. 차트 플롯 영역 내부 또는 외부의 왼쪽 또는 오른쪽에 레이블이 배치될 때 축이 어떻게 보이는지 시각화할 수 있도록 yAxisLabelLocation 구성할 수 있는 드롭다운이 있습니다.

    Axis Advanced Scenarios

    고급 축 레이아웃 시나리오의 경우 Angular 데이터 차트 사용하여 축을 공유하고, 동일한 플롯 영역에 여러 y축 및/또는 x축을 추가하거나, 특정 값에서 축을 교차할 수도 있습니다. 다음 예에서는 IgxDataChartComponent의 이러한 기능을 사용하는 방법을 보여줍니다.

    Axis Sharing Example

    Angular IgxDataChartComponent의 동일한 플롯 영역에서 여러 축을 공유하고 추가할 수 있습니다. 공유 IgxTimeXAxisComponent 사용하고 여러 IgxNumericYAxisComponent 추가하여 광범위한 값(예: 주가 및 주식 거래량)을 갖는 많은 데이터 소스를 표시하는 것이 일반적인 시나리오입니다.

    다음 예에서는 주식형 차트와 기둥 차트가 표시된 주식 가격 및 거래량 차트를 보여줍니다. 이 경우 왼쪽의 Y축은 기둥 차트에서 사용되고 오른쪽의 Y축은 주식형 차트에서 사용되며 X축은 두 축이 공유됩니다.

    Axis Crossing Example

    플롯 영역 외부에 축을 배치하는 것 외에도 Angular IgxDataChartComponent는 플롯 영역 내부에 축을 배치하고 특정 값에서 교차하도록 하는 옵션도 제공합니다. 예를 들어 x축과 y축 모두에 crossingAxis 및 crossingValue 속성을 설정하여 축 선과 축 레이블이 (0, 0) 원점에서 교차하도록 렌더링하여 삼각 차트를 만들 수 있습니다.

    다음 예에서는 X축과 Y축이 (0, 0) 원점에서 서로 교차하는 분산 스플라인 차트로 표현되는 Sin 및 Cos 파동을 보여줍니다.

    Additional Resources

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

    API References

    다음은 위 섹션에서 언급된 API 멤버 목록입니다. 위 섹션의 d:

    IgxDataChartComponent IgxCategoryChartComponent
    Axes ➔ IgxNumericYAxisComponent ➔ crossingAxis 없음
    Axes ➔ IgxNumericYAxisComponent ➔ crossingValue 없음
    Axes ➔ IgxNumericXAxisComponent ➔ isInverted xAxisInverted
    Axes ➔ IgxNumericYAxisComponent ➔ isInverted yAxisInverted
    Axes ➔ IgxNumericYAxisComponent ➔ LabelLocation yAxisLabelLocation
    Axes ➔ IgxNumericXAxisComponent ➔ LabelLocation xAxisLabelLocation
    Axes ➔ IgxNumericYAxisComponent ➔ LabelHorizontalAlignment yAxisLabelHorizontalAlignment
    Axes ➔ IgxNumericXAxisComponent ➔ LabelVerticalAlignment xAxisLabelVerticalAlignment
    Axes ➔ IgxNumericYAxisComponent ➔ LabelVisibility yAxisLabelVisibility
    Axes ➔ IgxNumericXAxisComponent ➔ LabelVisibility xAxisLabelVisibility