Angular Chart Selection

    O recurso de seleção de Ignite UI for Angular em Angular {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 comportamentoselectionMode padrão desligado e requer optar por uma das seguintes opções. 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

    Brightenvai desbotar o item selecionado enquantoFadeOthers causará o efeito oposto.GrayscaleOthers vai se comportar de forma semelhante,FadeOthers mas em vez disso mostra uma cor cinza para o restante da série. Note que isso vai sobrescrever qualquerselectionBrush configuração.SelectionColorOutline eSelectionColorThickOutline vai traçar uma borda ao redor da série.

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

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

    Configuring Selection via Color Fill

    O exemplo a seguir mostra a combinação de ambosSelectionColorFill eAuto o comportamento de seleção, também conhecidoPerSeriesAndDataItemMultiSelect como Os Preenchimentos de Cor fornecem uma pista visual útil, pois mudam a cor de contracapa 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, usarselectionBehavior comPerDataItemMultiSelect afetará todas as séries em toda a categoria quando várias séries estiverem presentes, permitindo a seleção entre categorias. Comparado aoPerDataItemSingleSelect fato de apenas uma única categoria de itens pode ser selecionada por vez. Isso é útil se múltiplas séries estiverem vinculadas a diferentes fontes de dados e oferece maior controle sobre a seleção entre categorias.PerSeriesAndDataItemGlobalSingleSelect Permite a seleção de séries únicas em todas as categorias ao mesmo tempo.

    Configuring Outline Selection

    QuandofocusBrush aplicada, a série selecionada aparecerá com uma borda quando aselectionMode propriedade for definida para uma das opções de foco.

    Radial Series Selection

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

    Programmatic Selection

    A Seleção de Gráfico também pode ser configurada em código, onde itens selecionados do gráfico podem ser vistos na inicialização ou em tempo de execução. Isso pode ser alcançado adicionando itens aoSelectedSeriesCollection doIgxCategoryChartComponent. AMatcher propriedade doIgxChartSelection 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ê conhece as propriedades que sua fonte de dados contém, pode usar asValueMemberPath que a série teria.

    O combinador é ideal para usar em gráficos, como quandoIgxCategoryChartComponent você não tem acesso à série real, como oIgxDataChartComponent. Nesse caso, se você conhece as propriedades que sua fonte de dados continha, pode supor os ValueMemberPaths que a série teria. Por exemplo, se sua fonte de dados tem propriedades numéricas como Nuclear, Carvão, Petróleo, Solar, então você sabe que existem séries criadas para cada uma dessas propriedades. Se você quiser destacar a série vinculada a valores solares, pode adicionar um objeto ChartSelection àselectedSeriesItems coleção usando um emparelhador 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:

    IgxCategoryChartComponent Properties IgxDataChartComponent Properties