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

    AngularIgxDataChartComponent의 같은 플롯 영역 내에서 여러 축을 공유하고 추가할 수 있습니다. 주식 가격과 주식 거래량 등 다양한 값을 가진 여러 데이터 소스를 그래프로 표시하기 위해 shareIgxTimeXAxisComponent를 사용하고 복수를IgxNumericYAxisComponent 더하는 것이 일반적입니다.

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

    Axis Crossing Example

    도면 영역 밖에 축을 배치하는 것 외에도, AngularIgxDataChartComponent은 도표를 도면 안에 위치시키고 특정 값에서 교차하도록 하는 옵션도 제공합니다. 예를 들어, x축과 y축 모두에 와crossingAxis 속성을 설정crossingValue 하여 축선과 축 라벨을 원점에서 교차하도록 렌더링하는 삼각함수 차트를 만들 수 있습니다.

    다음 예에서는 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