Blazor 차트 데이터 주석

    Blazor 차트에서 데이터 주석 레이어를 사용하면 데이터 차트로 플롯된 데이터에 경사선, 수직/수평선(축 슬라이스), 수직/수평 스트립(특정 축 대상), 직사각형 및 평행 사변형(밴드라고도 함)으로 주석을 달 수 있습니다. 데이터 바인딩이 지원되므로 차트를 원하는 만큼 주석을 만들 수 있습니다. 또한 서로 다른 주석 계층을 결합할 수 있으며 그림 영역 내부의 텍스트를 오버레이하여 주석이 추가된 중요한 이벤트, 패턴 및 데이터의 영역에 배치할 수 있습니다.

    [!Note] These features are designed to support cartesian axes and does not currently support radius or angle axes.

    예를 들어, 주식 이벤트와 패턴으로 주식 가격에 주석을 달 수 있습니다.

    이 샘플이 마음에 드시나요? 전체 Blazor 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하세요. 무료로 다운로드하세요.

    Blazor Data Annotation Slice Layer Example

    Blazor, 링크: {DataChartLink}. DataAnnotationSliceLayer.html[DataAnnotationSliceLayer]는 구성 요소 내IgbDataChart 축의 여러 값에서 차트를 절단하는 여러 수직 또는 수평 선을 렌더링합니다. 이 데이터 주석 레이어는 중요한 이벤트(예: 회사 분기 보고서)를 x축에 주석을, 중요한 값을 y축에 주석을 달기 위해 자주 사용됩니다. TargetAxis 속성을 y축으로 설정하면 데이터 주석 레이어가 수평 슬라이스로 렌더링되거나, TargetAxis 속성을 x축으로 설정하면 데이터 주석 레이어가 수직 슬라이스로 렌더링됩니다. 모든 시리즈와 마찬가지로, DataAnnotationSliceLayer는 속성에 대해 데이터 바인딩DataSource을 지원하며, 이 속성은 최소 1개의 숫자 데이터 열이 속성에 매핑AnnotationValueMemberPath 되어야 하는 데이터 항목 집합으로 설정할 수 있습니다.

    예를 들어 DataAnnotationSliceLayer를 사용하여 주식 분할 및 수익 보고서 결과와 같은 중요한 이벤트로 주가에 주석을 달 수 있습니다.

    Blazor Data Annotation Strip Layer Example

    Blazor 에서는IgbDataAnnotationStripLayer 컴포넌트 내IgbDataChart 축 위의 두 값 사이에 여러 개의 수직 또는 수평 스트립을 렌더링합니다. 이 데이터 주석 레이어는 x축에 사건(예: 주식시장 붕괴)의 지속 시간을, y축에 중요한 값 범위를 주석하는 데 사용할 수 있습니다. TargetAxis 속성을 y축으로 설정하면 데이터 주석 레이어가 수평 스트립으로 렌더링되거나, TargetAxis 속성을 x축으로 설정하면 데이터 주석 레이어가 수직 스트립으로 렌더링됩니다. 모든 시리즈와 마찬가지로, 이 속성IgbDataAnnotationStripLayer은 AnnotationValueMemberPath 속성에 최소 1개의 수치 데이터 열이 매핑되어야 하는 데이터 항목 집합에 설정할 수 있는 속성을 통해DataSource 데이터 바인딩을 지원합니다.

    예를 들어, 주식 시장 붕괴와 연방 금리 변동을 차트에 주석을 달 수 있습니다IgbDataAnnotationStripLayer.

    Blazor Data Annotation Line Layer Example

    Blazor에서 는IgbDataAnnotationLineLayer 컴포넌트IgbDataChart 영역의 두 지점 사이에 여러 선을 렌더링합니다. 이 데이터 주석 레이어는 주가의 상승과 하락을 따라 주가 차트에 주석을 달 수 있습니다. 모든 시리즈와 마찬가지로, DataAnnotationLineLayer는 데이터 바인딩DataSource을 지원하며, 이 속성은 최소 4개의 수치 데이터 열을 포함해야 하며, 이 항목들은 선의 시작점과 끝점의 x/y 좌표를 나타내야 합니다. 시작 지점은 usingStartValueXMemberPath andStartValueYMemberPath properties를 사용해 매핑해야 하며, 종료 지점은 andEndValueXMemberPath properties를 사용EndValueYMemberPath 해 매핑해야 합니다.

    예를 들어 DataAnnotationLineLayer를 사용하여 주가의 성장 및 하락 패턴과 y축의 52주 최고가 및 최저가에 주석을 달 수 있습니다.

    Blazor Data Annotation Rect Layer Example

    Blazor 에서는IgbDataAnnotationRectLayer 구성 요소의IgbDataChart 플롯 영역에서 시작점과 끝점으로 정의된 여러 직사각형을 렌더링합니다. 이 데이터 주석 레이어는 주가의 약세 패턴과 같은 플롯 영역 영역을 주석으로 표시하는 데 사용할 수 있습니다. 모든 시리즈와 마찬가지로, DataAnnotationRectLayer는 데이터 항목 집합에 설정할 수 있는 속성을 통해DataSource 데이터 바인딩을 지원하며, 이 항목은 직사각형의 시작점과 끝점의 x/y 좌표를 나타내는 최소 4개의 숫자 데이터 열을 포함해야 합니다. 시작 지점은 usingStartValueXMemberPath andStartValueYMemberPath properties를 사용해 매핑해야 하며, 종료 지점은 andEndValueXMemberPath properties를 사용EndValueYMemberPath 해 매핑해야 합니다.

    예를 들어 DataAnnotationRectLayer를 사용하여 y축에서 약세 패턴과 주가 격차에 주석을 달 수 있습니다.

    Blazor Data Annotation Band Layer Example

    Blazor 에서는IgbDataAnnotationBandLayer 구성 요소의IgbDataChart 플롯 영역 내 두 점 사이에 여러 개의 비스듬한 직사각형(자유형 평행사변형)을 렌더링합니다. 이 데이터 주석 레이어는 주가의 상승과 하락 범위를 주석으로 표시하는 데 사용할 수 있습니다. 모든 시리즈와 마찬가지로, DataAnnotationBandLayer는 데이터 항목 집합으로 설정할 수 있는 속성을 통해DataSource 데이터 바인딩을 지원하며, 이 항목들은 선의 시작점과 끝점의 x/y 좌표를 나타내는 최소 4개의 수치 데이터 열을 포함해야 합니다. 시작 지점은 and 속성으로StartValueXMemberPath 매핑해야 하고, 끝 지점은 andStartValueYMemberPath 속성으로EndValueXMemberPath 매핑해야EndValueYMemberPath 합니다. 또한, AnnotationBreadthMemberPath 속성에 숫자 데이터 열을 바인딩하여 비스듬한 직사각형의 두께/크기를 지정할 수 있습니다.

    예를 들어 DataAnnotationBandLayer를 사용하여 주가 상승 범위에 주석을 달 수 있습니다.

    API References

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

    • TargetAxis: 이 속성은 어떤 축에 DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer가 활성화되어야 하는지 지정합니다.
    • DataSource: 이 속성은 데이터를 주석 계층에 결합하여 정확한 도형을 제공합니다.
    • StartValueXMemberPath: 이 속성은 DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer의 시작 지점을 x-위치로 나타내는 데이터 열의 이름에 매핑한 것입니다.
    • StartValueYMemberPath: 이 속성은 DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer의 시작 지점을 y-위치로 가진 데이터 열의 이름에 매핑한 것입니다.
    • EndValueXMemberPath: 이 속성은 DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer의 끝에 x-위치가 있는 데이터 열에 매핑됩니다.
    • EndValueYMemberPath: 이 속성은 DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer의 끝에 y-위치가 있는 데이터 열에 매핑됩니다.
    • StartLabelXMemberPath: 이 속성은 축을 따라 xAxis의 시작 위치에 대한 오버레이 레이블을 나타내는 데이터 열에 대한 매핑입니다.
    • StartLabelXDisplayMode|StartLabelYDisplayMode |EndLabelXDisplayMode ||EndLabelYDisplayMode:CenterLabelXDisplayMode이 속성들은 주석 라벨이 주석 도형의 시작, 끝, 중앙에 표시해야 할 항목을 지정합니다. 예를 들어, 매핑된 데이터 값, 매핑된 데이터 라벨, 축 값, 또는 주어진 주석 라벨을 숨기는 것.
    • StartLabelYMemberPath: 이 속성은 y축 위의 시작 위치를IgbDataAnnotationBandLayer​IgbDataAnnotationLineLayer​IgbDataAnnotationRectLayer 나타내는 축 레이블을 나타내는 데이터 열에 대한 대응입니다.
    • EndLabelYMemberPath: 이 속성은 y축 위의 끝 위치에IgbDataAnnotationBandLayer 대한 축 레이블을 나타내는 데이터 열에 대한 사상입니다.IgbDataAnnotationLineLayer​IgbDataAnnotationRectLayer​