Angular Chart Data Tooltip
No Ignite UI for Angular, o DataToolTip exibe valores e títulos de séries, bem como emblemas de legenda de séries em uma dica de ferramenta. Além disso, ele fornece muitas propriedades de configuração para IgxDataLegendComponent filtrar linhas de série e colunas de valores, estilo e valores de formatação. Esse tipo de dica de ferramenta é atualizado ao mover o mouse para dentro da área de plotagem dos componentes e IgxFinancialChartComponent IgxDataChartComponent. IgxCategoryChartComponent
Angular Data Tooltip Properties
Todas as propriedades de IgxDataToolTipLayerComponent são prefixadas com DataToolTip e expostas na API de IgxCategoryChartComponent e IgxFinancialChartComponent components. No entanto, você precisará criar uma instância e IgxDataToolTipLayerComponent adicioná-la à coleção de séries do IgxDataChartComponent componente se quiser usá-la com gráficos radiais, gráficos polares, gráficos de dispersão.
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 de cabeçalho exibe o rótulo do eixo do ponto que está passando o mouse e pode ser alterada usando a dataToolTipHeaderText 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 exibe o total de todos os valores da série. O título de resumo padrão pode ser alterado usando a dataToolTipSummaryTitleText propriedade da legenda. Além disso, você pode usar a dataToolTipSummaryType propriedade para personalizar se deseja exibir o Total, Min, Max ou Average 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 do IgxDataToolTipLayerComponent incluem as colunas título, rótulo, valor e unidades. Cada série no gráfico pode ter várias colunas para rótulo, valor e unidades, dependendo das dataToolTipIncludedColumns coleções ou dataToolTipExcludedColumns do gráfico.
A coluna de título exibe emblemas de legenda chartTitle e títulos de série, que vêm da propriedade dos diferentes IgxSeriesComponent plotados no gráfico.
A coluna label exibe o nome ou a abreviação dos diferentes caminhos de propriedade nas dataToolTipIncludedColumns coleções or dataToolTipExcludedColumns da dica de ferramenta.
A coluna de valor exibe valores de série como texto abreviado que pode ser formatado usando a dataToolTipValueFormatAbbreviation propriedade para aplicar a mesma abreviação para todos os números definindo essa propriedade como Auto ou Shared. Como alternativa, um usuário pode selecionar outras abreviações, como Independent, Kilo, Million, etc. A precisão dos valores abreviados é controlada usando o e dataToolTipValueFormatMaxFractions para dígitos dataToolTipValueFormatMinFractions 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 na DataToolTip definindo as dataToolTipUnitsText colunas para todas as colunas ou usando as seguintes propriedades em cada série no 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 nas dataToolTipIncludedColumns coleções e dataToolTipExcludedColumns geralmente correspondem aos caminhos de valor de seus itens de dados subjacentes, mas a série financeira tem a opção de incluir algumas especiais além dos High caminhos , Low, Open, e Close que são necessários para que a série financeira seja plotada corretamente. Você tem a capacidade de mostrar TypicalPrice e Change Volume opções na 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
dataLegendGroup pode ser definido, em todos os tipos de séries, como uma string que categorizará um grupo de séries na Legenda de Dados. Cada grupo terá sua própria linha de resumo exibida antes que outro grupo de séries seja exibido: Por padrão, DataLegend ocultará nomes de grupos, mas você pode exibir nomes de grupos definindo a groupRowVisible propriedade como true. groupingMode deve ser definido como "Agrupado" e labelDisplayMode deve ser definido como "Visível" na Camada de Dica de Ferramenta de Dados.
Angular Data Tooltip Grouping & Positioning for Category Chart & Financial Chart
Você pode definir dataToolTipGroupingMode a propriedade como Grouped ou Individual para agrupar o conteúdo de várias séries em uma única dica de ferramenta ou separar o conteúdo de cada série em várias dicas de ferramenta. Grouped No modo, você pode personalizar onde a dica de ferramenta é mostrada definindo as dataToolTipGroupedPositionModeX propriedades e dataToolTipGroupedPositionModeY. Isso essencialmente permite que você personalize os alinhamentos horizontais e verticais da dica de ferramenta e se deseja que ela rastreie os pontos de série mais próximos da posição do mouse ou fixe a dica de ferramenta na borda da área de plotagem.
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 abreviação automática de números grandes usando sua dataToolTipValueFormatAbbreviation 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 o dataToolTipValueFormatMinFractions e dataToolTipValueFormatMaxFractions. Isso permitirá que você determine o número mínimo e máximo de dígitos que aparecem após o ponto 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 alterar a exibição decimal padrão de valores dentro do DataToolTip para ser moeda alterando a dataToolTipValueFormatMode propriedade da camada. O DataToolTip também expõe a capacidade de modificar a cultura do símbolo de moeda exibido usando sua dataToolTipValueFormatCulture propriedade e definindo-a como sua marca de cultura correspondente. Por exemplo, o exemplo a seguir demonstra um gráfico com o dataToolTipValueFormatCulture conjunto como "en-GB":
Angular Data Tooltip Styling
O DataToolTip fornece propriedades para estilizar cada tipo de coluna. Cada uma dessas propriedades começa com Título, Rótulo, Valor ou Unidades, e você pode estilizar a cor, a fonte e a margem do texto. Por exemplo, se você quisesse definir a cor do texto de cada um deles, definiria as dataToolTipTitleTextColor propriedades , dataToolTipLabelTextColor, dataToolTipValueTextColor, e dataToolTipUnitsTextColor.
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.
GroupTextMargingroupTextColorGroupTextFontSizeGroupTextFontFamilyGroupTextFontStyleGroupTextFontStretchGroupTextFontWeightHeaderTextMarginheaderTextColorHeaderTextFontSizeHeaderTextFontFamilyHeaderTextFontStyleHeaderTextFontStretchHeaderTextFontWeight
API References
dataToolTipExcludedColumnsdataToolTipGroupedPositionModeXdataToolTipGroupedPositionModeYdataToolTipGroupingModedataToolTipHeaderTextdataToolTipIncludedColumnsdataToolTipLabelTextColorIgxDataToolTipLayerComponentdataToolTipSummaryTitleTextdataToolTipSummaryTypedataToolTipTitleTextColordataToolTipUnitsTextColordataToolTipUnitsTextdataToolTipValueFormatAbbreviationdataToolTipValueFormatCulturedataToolTipValueFormatMaxFractionsdataToolTipValueFormatMaxFractionsdataToolTipValueFormatMinFractionsdataToolTipValueFormatModedataToolTipValueTextColorMemberAsLegendLabel
GitHub