Blazor Chart Selection

    O recurso de seleção de Ignite UI for Blazor em Blazor {ComponentTitle} permite que os usuários selecionem, destaquem, contornem e vice-versa desmarquem uma ou várias séries em um gráfico. Isso oferece muitas possibilidades diferentes de como os usuários interagem com os dados apresentados de maneiras mais significativas.

    Configuring Selection

    O comportamento SelectionMode padrão foi desativado e requer a aceitação de uma das opções a seguir. Existem vários modos de seleção disponíveis no {ComponentName}:

    • Auto
    • Nenhum
    • Brighten
    • Desvanecer-se Outros
    • Tons de cinzaOutros
    • FocoCorEsboço Espesso
    • FocusColorOutline
    • SelectionColorThickOutline
    • SelectionColorOutline
    • FocusColorFill
    • SeleçãoColorFill
    • Esboço espesso

    Brighten desvanecerá o item selecionado enquanto FadeOthers fará com que ocorra o efeito oposto. GrayscaleOthers se comportará de maneira semelhante, FadeOthers mas mostrará uma cor cinza para o resto da série. Observe que isso substituirá qualquer SelectionBrush configuração. SelectionColorOutline e SelectionColorThickOutline desenhará uma borda ao redor da série.

    Em conjunto, a SelectionBehavior está disponível para fornecer maior controle sobre quais itens são selecionados. O comportamento padrão para Auto é PerSeriesAndDataItemMultiSelect.

    • Auto
    • PerDataItemMultiSelect
    • PerDataItemSingleSelect
    • PerSeriesAndDataItemMultiSelect
    • PerSeriesAndDataItemSingleSelect
    • PerSeriesAndDataItemGlobalSingleSelect
    • PerSeriesMultiSelect
    • PerSeriesSingleSelect

    Configuring Selection via Color Fill

    O exemplo a seguir mostra a combinação de ambos SelectionColorFill e Auto o comportamento de seleção, também conhecido como PerSeriesAndDataItemMultiSelect. Os preenchimentos de cores fornecem uma dica visual útil, pois alteram a cor de fundo de todo o item da série. Ao clicar em cada item, você verá o item mudar de verde para roxo.

    Configuring Multiple Selection

    Outros modos de seleção oferecem vários métodos de seleção. Por exemplo, usar SelectionBehavior with PerDataItemMultiSelect afetará todas as séries em toda a categoria quando várias séries estiverem presentes, permitindo a seleção entre categorias. Em comparação com PerDataItemSingleSelect, apenas uma única categoria de itens pode ser selecionada por vez. Isso é útil se várias séries estiverem vinculadas a diferentes fontes de dados e fornecer maior controle de seleção entre categorias. PerSeriesAndDataItemGlobalSingleSelect permite a seleção de séries únicas em todas as categorias ao mesmo tempo.

    Configuring Outline Selection

    Quando FocusBrush for aplicado, a série selecionada aparecerá com uma borda quando a SelectionMode propriedade for definida como uma das opções de foco.

    Radial Series Selection

    Este exemplo demonstra outro tipo de série por meio do IgbDataChart onde cada série radial pode ser selecionada com cores diferentes.

    Programmatic Selection

    A Seleção de Gráfico também pode ser configurada no código em que os itens selecionados no gráfico podem ser vistos na inicialização ou no tempo de execução. Isso pode ser alcançado adicionando itens ao SelectedSeriesCollection do IgbCategoryChart. A Matcher propriedade do IgbChartSelection objeto permite selecionar uma série com base em um "matcher", ideal quando você não tem acesso à série real do gráfico. Se você souber as propriedades que sua fonte de dados contém, poderá usar o ValueMemberPath que a série seria.

    O matcher é ideal para uso em gráficos, como o IgbCategoryChart quando você não tem acesso à série real, como o IgbDataChart. Nesse caso, se você souber as propriedades que sua fonte de dados continha, poderá supor os ValueMemberPaths que a série teria. Por exemplo, se sua fonte de dados tiver propriedades numéricas Nuclear, Carvão, Petróleo, Solar, você saberá que há séries criadas para cada uma dessas propriedades. Se você quiser realçar a série associada a valores solares, poderá adicionar um objeto ChartSelection à SelectedSeriesItems coleção usando um matcher com as seguintes propriedades definidas

    Por exemplo, se sua fonte de dados tiver propriedades numéricas Nuclear, Carvão, Petróleo, Solar, você saberá que há séries criadas para cada uma dessas propriedades. Se você quiser selecionar a série associada a valores solares, poderá adicionar um objeto ChartSelection à coleção SelectedSeriesItems usando um matcher com as propriedades a seguir definidas.

    API References

    A seguir está uma lista de membros da API mencionados nas seções acima:

    IgbCategoryChart Properties IgbDataChart Properties