Web Components dicas de ferramentas de gráfico
Em Web Components gráficos, as dicas de ferramentas fornecem detalhes sobre os dados vinculados e são renderizadas em pop-ups quando o usuário final passa o mouse sobre os pontos de dados. As dicas de ferramentas são suportadas pelos controles , IgcCategoryChartComponent IgcFinancialChartComponent, e IgcDataChartComponent.
Web Components Chart Tooltip Types
Web Components Gráfico fornece três tipos de dicas de ferramentas que você pode usar com dicas de ferramentas habilitadas definindo a toolTipType propriedade. O exemplo a seguir mostra o Gráfico de Colunas com uma caixa de combinação que você pode usar para alterar o tipo de dicas de ferramenta.
A toolTipType propriedade é configurável e pode ser definida como uma das seguintes opções:
| Valor da propriedade | Descrição |
|---|---|
DefaultDica de ferramenta |
Exiba uma dica de ferramenta para um único item quando o ponteiro estiver posicionado sobre ele. |
DataDica de ferramenta |
Exiba as dicas de ferramentas de dados para todas as séries no gráfico. |
ItemDica de ferramenta |
Exiba uma dica de ferramenta para cada item de dados na categoria sobre a qual o ponteiro está posicionado. |
CategoryDica de ferramenta |
Exiba uma dica de ferramenta agrupada para todos os pontos de dados na categoria sobre a qual o ponteiro está posicionado. |
Web Components Chart Tooltip Template
Se nenhum dos tipos internos de dicas de ferramentas corresponder aos seus requisitos, você poderá criar suas próprias dicas de ferramentas para exibir e estilizar o título da série, os valores de dados e os valores de eixo. As seções a seguir demonstram como fazer isso em diferentes tipos de gráficos Web Components.
Custom Tooltips in Category Chart
Este exemplo mostra como criar dicas de ferramentas personalizadas para todas as séries no controle Web Components IgcCategoryChartComponent. Observe que você também pode aplicar a mesma lógica a dicas de ferramentas personalizadas no controle Web Components IgcFinancialChartComponent.
Custom Tooltips in Data Chart
Este exemplo mostra como criar dicas de ferramentas personalizadas para cada série no controle Web Components Gráfico de Dados.
Additional Resources
Você pode encontrar mais informações sobre recursos de gráfico relacionados nestes tópicos:
API References
Os componentes IgcCategoryChartComponent e IgcFinancialChartComponent compartilham as seguintes propriedades de API:
IgcDataChartComponent No componente, você pode usar os seguintes componentes e propriedades da API: