Angular dicas de ferramentas de gráfico

    Em Angular gráficos, as dicas fornecem detalhes sobre os dados vinculados e eles são renderizados em pop-ups quando o usuário final paira sobre os pontos de dados. As dicas de ferramenta são suportadas pelosIgxCategoryChartComponent controles,IgxFinancialChartComponent, eIgxDataChartComponent.

    Angular Chart Tooltip Types

    Angular Gráfico fornecem três tipos de tooltips que você pode ativar com tooltips configurando otoolTipType imóvel. O exemplo a seguir mostra o Quadro de Colunas com uma caixa combinada que você pode usar para mudar o tipo de dica de ferramenta.

    AtoolTipType propriedade é configurável e pode ser definida para 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.

    Angular 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 Angular.

    Custom Tooltips in Category Chart

    Este exemplo mostra como criar tooltips personalizados para todas as séries sob AngularIgxCategoryChartComponent controle. Note que você também pode aplicar a mesma lógica a tooltips personalizadas no controle AngularIgxFinancialChartComponent.

    Custom Tooltips in Data Chart

    Este exemplo mostra como criar dicas de ferramentas personalizadas para cada série no controle Angular Gráfico de Dados.

    Additional Resources

    Você pode encontrar mais informações sobre recursos de gráfico relacionados nestes tópicos:

    API References

    OsIgxCategoryChartComponent componentes eIgxFinancialChartComponent compartilham as seguintes propriedades da API:

    NoIgxDataChartComponent componente, você pode usar os seguintes componentes e propriedades da API: