Web Components 차트 사용자 주석 계층

    Ignite UI for Web Components 에서는 사용자 주석 기능을 사용해 런타임에 슬라이스, 스트립, 포인트 주석으로 주석을 달IgcDataChartComponent 수 있습니다. 이 기능을 통해 최종 사용자는 슬라이스 주석을 사용해 회사 분기 보고서와 같은 중요한 단일 이벤트를 호출하거나, 지속 기간이 있는 이벤트는 스트립 주석을 사용해 플롯에 더 많은 세부사항을 추가할 수 있습니다. 또한 점 주석이나 이 세 가지의 조합을 사용해 그래프 급수에서 개별 점을 불러낼 수도 있습니다.

    이는 이용 가능한 도구IgcToolbarComponent 들과 직접 통합되어 있습니다. 다음 주제에서는 예제와 함께 차트의 플롯 영역에 사용자 주석을 추가하는 방법IgcToolbarComponent과 프로그래밍적으로 사용자 주석을 추가하는 방법을 설명합니다.

    [!Note] This feature is designed to support X and Y axes and does not currently support radial or angular axes.

    Using the User Annotations with the Toolbar

    그IgcToolbarComponent "차트 주석 주기"와 "노트 삭제"라는 두 가지 도구가 포함된 주석 메뉴 항목을 노출시킵니다. 이 메뉴 항목이 나타나려면 먼저 다음 항목을 설정해야 합니다isUserAnnotationsEnabled 해당 차트에서의 속성은 다음과 같다.true.

    열면 나타나는 "차트 주석" 옵션을 통해 플롯 영역IgcDataChartComponent에 주석을 달 수 있습니다. 이는 슬라이스, 스트립, 포인트 주석을 추가함으로써 할 수 있습니다. X축이나 Y축의 라벨을 클릭하면 슬라이스 주석을 추가할 수 있습니다. 플롯 영역을 클릭하고 드래그하면 스트립 주석을 추가할 수 있습니다. 또한, 차트에 표시된 수열에서 한 점을 클릭해 점 주석을 추가할 수도 있습니다.

    Web Components user-annotation-create

    이전에 추가한 주석은 "노트 삭제" 메뉴 항목을 선택한 후 슬라이스 또는 스트립 사용자 주석의 축 주석을 클릭하거나, 해당 데이터 포인트를 클릭해 사용자 주석을 사용할 수 있습니다.

    Web Components 사용자-주석-삭제

    이러한 사용자 주석 중 하나를 추가할 때XamToolbar, 그IgcDataChartComponent 다음과 같은 사건을 일으킬 것입니다UserAnnotationInformationRequested 사용자 주석에 대한 더 많은 정보를 제공할 수 있습니다. 이 사건의 인수들은 다음과 같은 속성을 가진다AnnotationInfo이 방법은IgcUserAnnotationInformation 주석의 여러 측면을 구성할 수 있게 해주는 객체입니다.

    아래 표는 다음과 같은IgcUserAnnotationInformation 다양한 구성 가능한 속성에 대해 자세히 설명합니다:

    재산 유형 설명
    annotationData string 이 속성은 사용자 주석에 추가 정보를 제공합니다. 이 속성은 주석의 툴팁에 추가 정보를 보여주기 위해 이벤트와UserAnnotationToolTipContentUpdating 함께 사용하도록 설계되었습니다.
    annotationId string 이 읽기 전용 속성은 사용자 주석의 고유 문자열 ID를 반환합니다.
    badgeColor string 이 속성은 사용자 주석에서 배지에 사용할 색상을 생성하거나 설정합니다.
    badgeImageUri string 이 속성은 사용자 주석에서 배지에 사용할 이미지로 가는 경로를 얻거나 설정합니다.
    dialogSuggestedXLocation double 이 속성은 사용자 주석이 추가된 위치에 따라 대화 대화를 표시할 수 있는 추천 X 위치를 받습니다.
    dialogSuggestedYLocation double 이 속성은 사용자 주석이 추가된 위치에 따라 대화를 보여주기 위해 권장 Y 위치를 부여받습니다.
    label string 이 속성은 사용자 주석에 표시되는 라벨을 얻거나 설정합니다.
    mainColor string 이 속성은 사용자 주석의 배경을 채우기 위해 사용할 색상을 얻거나 설정합니다.

    주석에 변경을 한 후에는UserAnnotationInformationRequested 이벤트를 호출해야 합니다.finishAnnotationFlow에 대한 방법IgcDataChartComponent 주석 생성을 마치고 변경 사항을 커밋하는 것입니다. 또는 주석 생성을 취소할 수도 있습니다.cancelAnnotationFlow 그리고annotationId 주석은 다음에서 얻을 수 있습니다.AnnotationInfo의 매개변수UserAnnotationInformationRequested 앞서 언급한 사건의 주장들입니다. 이렇게 하면 플롯 영역에서 주석이 제거됩니다.

    Using the User Annotations Programmatically

    프로그래밍적으로 사용할IgcUserAnnotationLayerComponent 때는 차트를 사용자 주석을 추가하거나 제거할 수 있는 모드로 전환하는 두 가지 다른 메서드IgcDataChartComponent를 호출할 수 있습니다. 이 방법들은 각각 와startCreatingAnnotation 이름startDeletingAnnotation이 붙여집니다.

    호출startCreatingAnnotation 후에는 X축 또는 Y축의 라벨을 클릭해 슬라이스 주석을 추가할 수 있고, 플롯 영역을 클릭하고 드래그한 후 마우스 버튼을 놓아 스트립 주석을 추가할 수 있으며, 차트에 표시된 연열의 데이터 포인트를 클릭해 점 주석을 추가할 수 있습니다.

    이 사용자 주석 중 하나를 추가하면 다음과 같은 이벤트가 발생합니다UserAnnotationInformationRequested 여기서 사용자 주석에 대한 더 많은 정보를 제공할 수 있습니다. 이 사건의 인수들은 다음과 같은 속성을 가진다AnnotationInfo이 방법은IgcUserAnnotationInformation 주석의 여러 측면을 구성할 수 있게 해주는 객체입니다.

    주석에 변경을 한 후에는UserAnnotationInformationRequested 이벤트를 호출해야 합니다.finishAnnotationFlow에 대한 방법IgcDataChartComponent 주석 생성을 마치고 변경 사항을 커밋하는 것입니다. 또는 주석 생성을 취소할 수도 있습니다.cancelAnnotationFlow 그리고annotationId 주석은 다음에서 얻을 수 있습니다.AnnotationInfo의 매개변수UserAnnotationInformationRequested 앞서 언급한 사건의 주장들입니다. 이렇게 하면 플롯 영역에서 주석이 제거됩니다.

    사용자 주석이 차트에 추가되면, 컬렉션에IgcSeriesComponent a.IgcUserAnnotationLayerComponent이 사이트IgcUserAnnotationLayerComponent 에는 플롯 영역에 추가된 주석 유형에 따라 요소와 요소를 저장할annotations​IgcUserSliceAnnotation​IgcUserStripAnnotation 수 있는 컬렉션이 있습니다.IgcUserPointAnnotation​

    User Annotation ToolTip

    각 사용자 주석은 마우스 마우스 마우스 시 툴팁을 표시하여 주석에 더 많은 세부 정보를 추가할 수 있습니다.

    차트는 툴팁이 표시되는 동안 사용자 주석의 내용을 업데이트할 수 있는 이벤트를 제공합니다UserAnnotationToolTipContentUpdating. 이 사건의 사건 인자는 두 가지 속성Content: andAnnotationInfo를 드러냅니다.

    툴팁은 이벤트와UserAnnotationInformationRequested 연동되어 작동하도록 설계되어, 해당 이벤트annotationData 속성을 통해 사용자 주석에 더 많은 세부 정보를 제공할 수 있습니다. 이벤트의AnnotationInfo 이벤트 인자에 대한 속성은UserAnnotationToolTipContentUpdating 그 이벤트에서 수정할 수 있는 속성AnnotationInfo과UserAnnotationInformationRequested 동일한 인스턴스가 됩니다. 이를 통해 사용자 주석에 제공된 정보를 활용하고 툴팁 내에서 더 많은 정보를 제공할 수 있습니다.

    API References

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

    Additional Resources

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