Angular Chart Data Tooltip

    Em Ignite UI for Angular, o DataToolTip exibe valores e títulos das séries, bem como os emblemas das legendas das séries em uma tooltip. Além disso, ele fornece muitas propriedades de configuração paraIgxDataLegendComponent filtrar linhas de séries e valores de colunas, valores de estilo e formatação. Esse tipo de dica de ferramenta é atualizado enquanto move o mouse dentro da área do gráfico dosIgxCategoryChartComponent componentes,IgxFinancialChartComponent eIgxDataChartComponent.

    Angular Data Tooltip Properties

    Todas as propriedades deIgxDataToolTipLayerComponent são prefixadas com DataToolTip e expostas na API deIgxCategoryChartComponent eIgxFinancialChartComponent componentes. No entanto, você precisará criar uma instância eIgxDataToolTipLayerComponent adicioná-la à coleção deIgxDataChartComponent componentes em série se quiser usá-la com Radial Charts, Polar Charts, Scatter Charts.

    Angular Data Tooltip Elements

    O DataToolTip exibe o conteúdo usando um conjunto de três tipos de linhas e quatro tipos de colunas.

    Angular Data Tooltip Rows

    As linhas do DataToolTip incluem a linha de cabeçalho, as linhas de série e a linha de resumo.

    A linha do cabeçalho exibe o rótulo do eixo do ponto que está pairando, e pode ser alterada usando adataToolTipHeaderText propriedade.

    A linha da série pode, na verdade, ser um conjunto de linhas correspondentes a cada série plotada no gráfico. Essas linhas exibirão o emblema da legenda, o título da série, o valor real/abreviado da série e o símbolo e a unidade da abreviação, se especificado.

    Por fim, há uma linha de resumo que mostra o total de todos os valores da série. O título resumo padrão pode ser alterado usando adataToolTipSummaryTitleText propriedade da legenda. Além disso, você pode usar adataToolTipSummaryType propriedade para personalizar se você exibe o Total, Mínimo, Máximo ou Média dos valores da série na linha de resumo.

    O exemplo a seguir demonstra a dica de ferramenta de dados com um resumo aplicado:

    Angular Data Tooltip Columns

    As colunas de oIgxDataToolTipLayerComponent incluem as colunas título, etiqueta, valor e unidades. Cada série no gráfico pode ter múltiplas colunas para rótulo, valor e unidades, dependendo dasdataToolTipIncludedColumns coleçõesdataToolTipExcludedColumns do gráfico.

    A coluna de título exibe os emblemas de legendas e títulos das séries, que vêm dachartTitle propriedade dos diferentesIgxSeriesComponent plotados no gráfico.

    A coluna de etiqueta exibe o nome ou a abreviação dos diferentes caminhos de propriedades nasdataToolTipIncludedColumns coleções oudataToolTipExcludedColumns da tooltip.

    A coluna de valores exibe os valores da série como texto abreviado, que pode ser formatado usando adataToolTipValueFormatAbbreviation propriedade para aplicar a mesma abreviação para todos os números, definindo essa propriedade comoAuto ou.Shared Alternativamente, o usuário pode selecionar outras abreviações comoIndependent,Kilo,Million, etc. A precisão dos valores abreviados é controlada usando osdataToolTipValueFormatMinFractions dígitos edataToolTipValueFormatMaxFractions para mínimo e máximo, respectivamente.

    A coluna de unidades exibe um símbolo de abreviação e/ou texto de unidade, que pode ser definido tanto no DataToolTip definindo paradataToolTipUnitsText todas as colunas quanto usando as seguintes propriedades em cada série do gráfico:

    • Série de categorias (por exemplo, ColumnSeries)
      • ValueMemberAsLegendUnit="K"
    • Série de preços financeiros:
      • OpenMemberAsLegendUnit="K"
      • LowMemberAsLegendUnit="K"
      • HighMemberAsLegendUnit="K"
      • CloseMemberAsLegendUnit="K"
    • Range Series:
      • LowMemberAsLegendUnit="K"
      • HighMemberAsLegendUnit="K"
    • Radial Series:
      • ValueMemberAsLegendUnit="km"
    • Polar Series:
      • RadiusMemberAsLegendUnit="km"
      • AngleMemberAsLegendUnit="degrees"

    Para as propriedades listadas acima, há propriedades correspondentes que terminam com MemberAsLegendLabel para determinar o texto nas colunas de rótulo mencionadas anteriormente.

    As colunas incluídas nasdataToolTipIncludedColumns coleções edataToolTipExcludedColumns geralmente correspondem aos caminhos de valor dos seus itens de dados subjacentes, mas a série financeira tem a opção de incluir alguns especiais além dosHigh caminhosLow​Open​Close que são necessários para que a série financeira seja plotada corretamente. Você tem a capacidade de mostrarTypicalPrice​Change eVolume as opções dentro da dica de ferramenta.

    O exemplo a seguir demonstra uma dica de ferramenta de dados com as colunas adicionadas de Abrir, Alto, Baixo, Fechar e Alterar:

    Angular Data Tooltip Grouping for Data Chart

    dataLegendGrouppode ser definido, em todos os tipos de séries, para uma string que categorizará um grupo de séries na Legenda de Dados. Cada grupo terá sua própria linha de resumo exibida antes de outro grupo de séries ser exibido: Por padrão, o DataLegend esconde os nomes dos grupos, mas você pode exibir os nomes dos grupos definindo agroupRowVisible propriedade como true.groupingMode deve ser definido como "Agrupado" elabelDisplayMode deve ser definido como "Visível" na Camada de Dica de Dados.

    Angular Data Tooltip Grouping & Positioning for Category Chart & Financial Chart

    Você pode definirdataToolTipGroupingMode a propriedade como ouGrouped​Individual agrupar conteúdo de várias séries em uma única dica de ferramenta ou conteúdo separado para cada série em várias dicas de ferramenta. NoGrouped modo, você pode personalizar onde a dica aparece definindo asdataToolTipGroupedPositionModeX propriedades edataToolTipGroupedPositionModeY. Isso basicamente permite personalizar os alinhamentos horizontal e vertical da dica de ferramenta e se você quer que ela acompanhe os pontos de série mais próximos da posição do mouse ou se fixe a dica na borda da área do gráfico.

    O exemplo a seguir demonstra uma dica de ferramenta de dados posicionada no canto superior direito do gráfico:

    Angular Data Tooltip Value Formatting

    O DataToolTip fornece a abreviação automática de números grandes usando suadataToolTipValueFormatAbbreviation propriedade. Isso adiciona um multiplicador na coluna de unidades, como quilo, milhão, bilhão, etc. Você pode personalizar o número de dígitos fracionários exibidos definindo odataToolTipValueFormatMinFractions edataToolTipValueFormatMaxFractions. Isso permitirá que você determine o número mínimo e máximo de dígitos que aparecem após a vírgula decimal, respectivamente.

    O exemplo a seguir demonstra um DataToolTip com as frações mínima e máxima definidas:

    Angular Data Tooltip Value Mode

    Você pode mudar a exibição decimal padrão dos valores dentro do DataToolTip para moeda mudando adataToolTipValueFormatMode propriedade da camada. O DataToolTip também expõe a possibilidade de modificar a cultura do símbolo da moeda exibido usando suadataToolTipValueFormatCulture propriedade e configurando-a para a tag de cultura correspondente. Por exemplo, o exemplo a seguir demonstra um gráfico com odataToolTipValueFormatCulture conjunto em "en-GB":

    Layout Mode

    Itens legendários podem ser posicionados em uma estrutura vertical ou de mesa via alayoutMode propriedade. O valor padrão éTable, que mantém a mesma aparência e sensação vistas em versões anteriores.

    Eg.

    Layout Mode

    Angular Data Tooltip Styling

    O DataToolTip fornece propriedades para estilizar cada tipo de coluna. Cada uma dessas propriedades começa com Título, Etiqueta, Valor ou Unidades, e você pode estilizar a cor, fonte e margem do texto. Por exemplo, se você quiser definir a cor do texto de cada uma dessas, você definiria asdataToolTipTitleTextColor propriedades ,dataToolTipLabelTextColor,dataToolTipValueTextColor, edataToolTipUnitsTextColor.

    O exemplo a seguir demonstra o uso das propriedades de estilo mencionadas acima:

    Várias propriedades são expostas, incluindo partes de agrupamento da dica de ferramenta.

    • GroupTextMargin
    • groupTextColor
    • GroupTextFontSize
    • GroupTextFontFamily
    • GroupTextFontStyle
    • GroupTextFontStretch
    • GroupTextFontWeight
    • HeaderTextMargin
    • headerTextColor
    • HeaderTextFontSize
    • HeaderTextFontFamily
    • HeaderTextFontStyle
    • HeaderTextFontStretch
    • HeaderTextFontWeight

    API References