Web Components Data Legend

Em Ignite UI for Web Components, é umaIgcDataLegendComponent versão altamente personalizável doIgcLegendComponent, que mostra valores de série e fornece muitas propriedades de configuração para filtrar linhas de séries e colunas de valores, valores de estilo e formatação. Essa lenda se atualiza ao mover o mouse dentro da área do gráfico doIgcCategoryChartComponent,IgcFinancialChartComponent, eIgcDataChartComponent. Além disso, ele possui um estado persistente que lembra o último ponto de passagem quando o ponteiro do mouse do usuário sai da área do enredo. Ele exibe esse conteúdo usando um conjunto de três tipos de linhas (cabeçalho, série, resumo) e quatro tipos de colunas (título, etiqueta, valor, unidade).

Web Components Data Legend Rows

As linhas de incluemIgcDataLegendComponent a linha de cabeçalho, linha(s) de série(s) 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 aheaderText propriedade.

Header Row

A linha de cabeçalho exibe o rótulo atual do eixo x ao passar o mouse sobre categorias, séries e séries financeiras. Você pode usarheaderFormatDate as propriedades de YheaderFormatTime para formatar data e hora noIgcDataLegendComponent eixo x mostrar datas. Para outros tipos de séries, aIgcDataLegendComponent série não renderiza a linha do cabeçalho.

Series Row

A linha de séries representa 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 da abreviação ou unidade de medida, se especificado. Você pode filtrar linhas de série definindoincludedSeries ouexcludedSeries propriedades para uma coleção de índices de séries (1, 2, 3) ou títulos de séries (Tesla, Microsoft).

Summary Row

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 asummaryTitleText propriedade da legenda. Além disso, você pode usar asummaryType propriedade para personalizar se você exibe osTotalMinMax valores da série naAverage linha de resumo.

Web Components Data Legend Columns

As colunas de incluemIgcDataLegendComponent o título da série, etiqueta, valor da coluna de dados e unidade opcional associada ao valor. Algumas séries no gráfico podem ter múltiplas colunas para etiqueta, valor e unidades. Por exemplo, a série de preços financeiros possui colunas de dados Alto, Baixo, Aberto e Fechar que podem ser filtradasIgcDataLegendComponent usando asincludedColumns propriedades ou.excludedColumns

Definir valores nasincludedColumns propriedades eexcludedColumns depende do tipo de série e de quantas colunas de dados elas suportam. Por exemplo, você pode definirincludedColumns propriedades para uma coleção de strings de Abertura e Fechamento e a legenda mostrará apenas os valores de abertura e fechamento dos preços das ações quando o gráfico estiver plotando séries financeiras. A tabela a seguir lista todos os nomes de colunas que podem ser usados para filtrar colunas na legenda de dados.

Type of Series	Column Names
Série de categorias	Valor
Série Radial	Valor
Série Polar	Radius, Angle
Bubble Series	X, Y, Radius
Série de dispersão	X, Y
Série de alcance	Alto, Baixo
Série Financeira	Alto, Baixo, Abrir, Fechar, Mudança, TypicalPrice, Volume

Onde o TypicalPrice e a alteração percentual dos preços OHLC são calculados automaticamente por séries financeiras, para que você não precise incluí-los em suas fontes de dados.

Title Column

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

Label Column

A coluna de rótulos mostra o nome curto no lado esquerdo da coluna de valor, por exemplo, "O" para preço aberto da ação. Você pode alternar a visibilidade dessa coluna usando alabelDisplayMode propriedade.

Value Column

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

Unit Column

A coluna unidade exibe um símbolo de abreviação no lado direito da coluna de valores. O símbolo da unidade depende davalueFormatAbbreviation propriedade, por exemplo, "M" para aMillion abreviação.

Customizing Columns

Você pode personalizar o texto exibido nas colunas Rótulo e Unidade usando propriedades que terminam com MemberAsLegendLabel e MemberAsLegendUnit em cada série. A tabela a seguir mostra algumas personalizações possíveis das colunas Rótulo e Unidade.

Type of Series	Propriedades da série
Série de categorias	ValueMemberAsLegendLabel="$" ValueMemberAsLegendUnit="M"
Série Radial	ValueMemberAsLegendLabel="Distance:" ValueMemberAsLegendUnit="KM"
Série Polar	RadiusMemberAsLegendLabel="Radius:" RadiusMemberAsLegendUnit="KM" AngleMemberAsLegendLabel="Angle:" AngleMemberAsLegendUnit="°"
Série de alcance	HighMemberAsLegendLabel="H:" HighMemberAsLegendUnit="K" LowMemberAsLegendLabel="L:" LowMemberAsLegendUnit="K"
Série Financeira	OpenMemberAsLegendLabel="O:" OpenMemberAsLegendUnit="K" HighMemberAsLegendLabel="H:" HighMemberAsLegendUnit="K" LowMemberAsLegendLabel="L:" LowMemberAsLegendUnit="K" CloseMemberAsLegendLabel="C:" CloseMemberAsLegendUnit="K"

Além disso, você pode usar aUnitText propriedade noIgcDataLegendComponent para alterar o texto exibido em todas as colunas da Unidade.

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.

Web Components Data Legend Styling

EleIgcDataLegendComponent fornece propriedades para estilizar cada tipo de coluna. Cada uma dessas propriedades começa com Título, Rótulo, Valor ou Unidades. Você pode estilizar a cor, a fonte e a margem do texto. Por exemplo, se você quiser definir a cor do texto de todas as colunas, você definiria astitleTextColor propriedades ,labelTextColor,valueTextColor, eunitsTextColor. O exemplo a seguir demonstra a utilização das propriedades de estilo mencionadas acima:

Web Components Data Legend Value Formatting

EleIgcDataLegendComponent fornece abreviação automática de números grandes usando suavalueFormatAbbreviation 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 ovalueFormatMinFractions evalueFormatMaxFractions. 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 como usar essas propriedades:

Web Components Data Legend Value Mode

Você tem a capacidade de mudar a exibição decimal padrão dos valores dentro doIgcDataLegendComponent para uma moeda alterando avalueFormatMode propriedade. Além disso, você pode mudar a cultura do símbolo da moeda exibido definindo avalueFormatCulture propriedade como uma etiqueta de cultura. Por exemplo, a seguinte legenda de dados de exemplo com ovalueFormatCulture conjunto "en-GB" para exibir o símbolo das libras esterlinas (£):

Web Components Data Legend Grouping

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.

Web Components Data Legend Styling & Events

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

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

EleIgcDataLegendComponent possui vários eventos que disparam ao renderizar a linha correspondente, mesmo durante interações com o mouse onde os valores estão sendo atualizados. Esses eventos estão listados abaixo com uma descrição do que foram projetados para serem usados:

StyleGroupRow: Este evento é acionado para cada grupo para estilizar o texto exibido nas linhas do grupo.
StyleHeaderRow: Esse evento é acionado ao renderizar a linha de cabeçalho.
StyleSeriesRow: Esse evento é executado uma vez para cada linha de série, o que permite o estilo condicional dos valores da série.
StyleSeriesColumn: Esse evento é ativado uma vez para cada coluna de série, o que permite o estilo condicional das diferentes colunas da série no gráfico.
StyleSummaryRow: Este evento é disparado uma vez ao renderizar a linha de resumo.
StyleSummaryColumn: Este evento é disparado uma vez ao renderizar a coluna de resumo.

Alguns dos eventos expõem umIgcDataLegendStylingRowEventArgs parâmetro como seus argumentos, que permite personalizar o texto de cada item, a cor do texto e a visibilidade geral da linha. Os argumentos do evento também expõem propriedades específicas do evento. Por exemplo, como oStyleSeriesRow evento é disparado para cada série, os argumentos do evento retornarão o índice da série e o título da série para a linha que representa a série.

StyleSummaryColumneSeriesStyleColumn eventos expõem umIgcDataLegendStylingColumnEventArgs parâmetro como seus argumentos, para personalizar cada campo da série. Os argumentos do evento também expõem propriedades específicas do evento, como índice de coluna e propriedades relacionadas aos membros de valor sobre as colunas.