Web Components Dashboard Tile 개요

    Web Components 대시보드 타일은 자동 데이터 시각화 구성 요소로, 데이터 소스 컬렉션/배열 또는 단일 데이터 요소의 분석을 통해 표시할 가장 적합한 시각화를 결정합니다. 그런 다음 다양한 방법으로 표시되는 시각화를 변경할 수 있는 추가 도구 모음을 임베디 IgcToolbarComponent 드에 제공합니다.

    범주 차트, 방사형 및 극좌표 차트, 분산형 차트, 지리 지도, 방사형 및 선형 게이지, 재무 차트 및 누적 차트를 포함하되 이에 국한되지 않는 제공된 데이터의 모양에 따라 다양한 시각화를 선택하여 표시할 수 있습니다.

    도구 모음의 차트 유형 메뉴와 상호 작용하면 가능한 후보 목록에서 다른 시각화를 선택할 수 있습니다.

    Web Components Dashboard Tile Example

    Dependencies

    Ignite UI for Web Components 도구 집합에 다음 패키지를 설치합니다.

    npm install igniteui-webcomponents-charts
npm install igniteui-webcomponents-core
npm install igniteui-webcomponents-dashboards
npm install igniteui-webcomponents-gauges
npm install igniteui-webcomponents-grids
npm install igniteui-webcomponents-inputs
npm install igniteui-webcomponents-layouts
npm install igniteui-webcomponents-maps

    다음 모듈은 Dashboard Tile 구성 요소를 사용할 때 제안됩니다.

    import { IgcDashboardTileModule, IgcDataChartDashboardTileModule, IgcRadialGaugeDashboardTileModule,
         IgcLinearGaugeDashboardTileModule, IgcGeographicMapDashboardTileModule,
         IgcPieChartDashboardTileModule } from "igniteui-angular-dashboards";

ModuleManager.register(
    IgcDataChartDashboardTileModule,
    IgcRadialGaugeDashboardTileModule,
    IgcLinearGaugeDashboardTileModule,
    IgcGeographicMapDashboardTileModule,
    IgcPieChartDashboardTileModule,
    IgcDashboardTileModule
);

    Usage

    대시보드 타일의 DataSource 속성을 바인딩하는 대상에 따라 기본적으로 표시되는 시각화가 결정되며, 컨트롤은 바인딩하는 데이터를 평가한 다음 Ignite UI for Web Components 도구 집합에서 표시할 시각화를 선택합니다. 대시보드 타일에 표시되도록 포함된 데이터 시각화 컨트롤은 다음과 같습니다.

    기본적으로 선택되는 데이터 시각화는 주로 스키마와 바인딩한 데이터 수 DataSource에 따라 달라집니다. 예를 들어, 단일 숫자 값을 바인딩하면 a IgcRadialGaugeComponent를 얻지만, 서로 쉽게 구분할 수 있는 값-레이블 쌍의 컬렉션을 바인딩하면 a XamDataPieChart를 얻을 수 있습니다. 더 많은 값 경로가 있는 an을 DataSource 바인딩하면 주로 바인딩된 컬렉션 수에 따라 여러 열 계열 또는 선 계열이 있는 a IgcDataChartComponent를 받게 됩니다. 또한 a 또는 a를 받을 지리적 점을 포함하는 것으로 보이는 데이터에 바인딩 ShapeDataSource 할 수 있습니다 IgcGeographicMapComponent.

    를 바인딩 DataSource 할 때 단일 시각화에 종속되지 않으며, 해당 VisualizationType 속성을 설정하여 특정 시각화를 보려는 것을 컨트롤에 알릴 수 있습니다. 예를 들어 특별히 꺾은선형 차트를 보려는 경우 다음과 같이 대시보드 타일을 정의할 수 있습니다.

    시각화 또는 시각화의 속성도 컨트롤 맨 위에 있는 을 IgcToolbarComponent 사용하여 구성할 수 있습니다. 여기에는 IgcToolbarComponent 현재 시각화에 대한 기본 도구가 있으며, 아래에 강조 표시된 4개의 대시보드 타일 관련 도구가 추가되었습니다.

    왼쪽에서 오른쪽으로:

    • 첫 번째 도구는 컨트롤에 제공된 데이터 그리드 DataSource를 표시합니다. 이것은 토글 도구이므로 그리드를 표시한 후 다시 클릭하면 시각화로 되돌아갑니다.
    • 두 번째 도구를 사용하면 현재 데이터 시각화의 설정을 구성할 수 있습니다.
    • 세 번째 도구를 사용하면 현재 시각화를 변경하여 다른 계열 유형을 그리거나 다른 유형의 시각화를 모두 표시할 수 있습니다. 이것은 위에서 언급 한 속성을 설정하여 컨트롤에서 VisualizationType 설정할 수 있습니다.
    • 마지막 도구를 사용하면 기본 데이터 항목에서 컨트롤에 포함되는 속성을 구성할 수 있습니다. 컨트롤에서 or excludedProperties 컬렉션을 설정하여 includedProperties 이를 구성할 수 있습니다.

    이 데모에서는 대시보드 타일과 Web Components 파이 차트 통합을 보여 줍니다. 오른쪽 위에 있는 도구 모음 옵션을 사용하면 데이터 시각화의 스타일을 지정하고 변경할 수 있습니다.

    이 데모에서는 대시보드 타일과 Web Components Geographic Map의 통합을 보여 줍니다. 오른쪽 위에 있는 도구 모음 옵션을 사용하면 데이터 시각화의 스타일을 지정하고 변경할 수 있습니다.

    API References

    Additional Resources