Blazor 대시보드 타일

    The Blazor Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display. It then also provides a further suite of tools in its embedded IgbToolbar that let you alter the visualization that is presented in a variety of ways.

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

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

    Blazor Dashboard Tile Example

    Dependencies

    Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file:

    @using IgniteUI.Blazor.Controls

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

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbDataChartDashboardTileModule),
    typeof(IgbRadialGaugeDashboardTileModule),
    typeof(IgbLinearGaugeDashboardTileModule),
    typeof(IgbGeographicMapDashboardTileModule),
    typeof(IgbPieChartDashboardTileModule),
    typeof(IgbDashboardTileModule)
);

    Usage

    Depending on what you bind the Dashboard Tile's DataSource property to will determine which visualization you see by default, as the control will evaluate the data you bind and then choose a visualization from the Ignite UI for Blazor toolset to show. The data visualization controls that are included to be shown in the Dashboard Tile are the following:

    The data visualization that is chosen by default is mainly dependent on the schema and the count of the DataSource that you have bound. For example, if you bind a single numeric value, you will get a IgbRadialGauge, but if you bind a collection of value-label pairs that are easy to distinguish from each other, you will likely get a XamDataPieChart. If you bind an DataSource that has more value paths, you will receive a IgbDataChart with multiple column series or line series, depending mainly on the count of the collection bound. You can also bind to a ShapeDataSource or data the appears to contain geographic points to receive a IgbGeographicMap.

    You are not locked into a single visualization when you bind the DataSource, and you can tell the control that you want to see a particular visualization by setting its VisualizationType property. For example, if you specifically wanted to see a line chart, you could define the Dashboard Tile like so:

    The visualization or properties of the visualization are also configurable using the IgbToolbar at the top of the control. This IgbToolbar has the default tools for the current visualization with the addition of four Dashboard Tile specific ones, highlighted below:

    대시보드 타일 툴바

    왼쪽에서 오른쪽으로:

    • The first tool will show a data grid with the DataSource provided to the control. This is a toggle tool, so if you click it again after showing the grid, it will revert to the visualization.
    • 두 번째 도구를 사용하면 현재 데이터 시각화의 설정을 구성할 수 있습니다.
    • The third tool allows you to change the current visualization, allowing you to plot a different series type or show a different type of visualization altogether. This can be set on the control by setting the VisualizationType property, mentioned above.
    • The last tool allows you to configure which properties on your underlying data item are included for the control. You can configure this by setting the IncludedProperties or ExcludedProperties collection on the control.

    이 데모는 Blazor 파이 차트와 대시보드 타일 통합을 보여줍니다. 오른쪽 상단의 툴바 옵션은 스타일링 및 데이터 시각화 변경에 대한 액세스를 제공합니다.

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

    API References

    Additional Resources