Blazor 축 레이아웃

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

    [!Note] the following examples can be applied to IgbCategoryChart as well as IgbFinancialChart controls.

    Axis Locations Example

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

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

    Axis Advanced Scenarios

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

    Axis Sharing Example

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

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

    Axis Crossing Example

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

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

    Axis Timeline Example

    다음 예에서는 IgbTimeXAxis 타임라인으로 사용하여 데이터 차트의 스타일을 지정하는 방법을 보여줍니다.

    Additional Resources

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

    API References

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

    IgbDataChart IgbCategoryChart
    Axes ➔ IgbNumericYAxis ➔ CrossingAxis 없음
    Axes ➔ IgbNumericYAxis ➔ CrossingValue 없음
    Axes ➔ IgbNumericXAxis ➔ IsInverted XAxisInverted
    Axes ➔ IgbNumericYAxis ➔ IsInverted YAxisInverted
    Axes ➔ IgbNumericYAxis ➔ LabelLocation YAxisLabelLocation
    Axes ➔ IgbNumericXAxis ➔ LabelLocation XAxisLabelLocation
    Axes ➔ IgbNumericYAxis ➔ LabelHorizontalAlignment YAxisLabelHorizontalAlignment
    Axes ➔ IgbNumericXAxis ➔ LabelVerticalAlignment XAxisLabelVerticalAlignment
    Axes ➔ IgbNumericYAxis ➔ LabelVisibility YAxisLabelVisibility
    Axes ➔ IgbNumericXAxis ➔ LabelVisibility XAxisLabelVisibility