Angular 레이아웃

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

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

    Axis Locations Example

    For all axes, you can specify axis location in relationship to chart plot area. The xAxisLabelLocation property of the Angular charts, allows you to position x-axis line and its labels on above or below plot area. Similarly, you can use the yAxisLabelLocation property to position y-axis on left side or right side of plot area.

    The following example depicts the amount of renewable electricity produced since 2009, represented by a Line Chart. There is a drop-down that lets you configure the yAxisLabelLocation so that you can visualize what the axes look like when the labels are placed on the left or right side on the inside or outside of the chart's plot area.

    Axis Advanced Scenarios

    For more advanced axis layout scenarios, you can use Angular Data Chart to share axis, add multiple y-axis and/or x-axis in the same plot area, or even cross axes at specific values. The following examples show how to use these features of the IgxDataChartComponent.

    Axis Sharing Example

    You can share and add multiple axes in the same plot area of the Angular IgxDataChartComponent. It a common scenario to use share IgxTimeXAxisComponent and add multiple IgxNumericYAxisComponent to plot many data sources that have wide range of values (e.g. stock prices and stock trade volumes).

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

    Axis Crossing Example

    In addition to placing axes outside plot area, the Angular IgxDataChartComponent also provides options to position axes inside of plot area and make them cross at specific values. For example, you can create trigonometric chart by setting crossingAxis and crossingValue properties on both x-axis and y-axis to render axis lines and axis labels such that they are crossing at (0, 0) origin point.

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