Anotações de gráficos de Web Components

As interações e anotações de foco do gráfico Web Components são implementadas por meio de camadas de interação de foco, que são séries adicionadas à coleção de séries. Essas camadas dependem da posição do cursor. Cada uma dessas camadas de anotação fornece uma interação de foco diferente que pode ser usada individualmente ou combinada com outras para fornecer interações de foco poderosas.

Web Components Annotations Example

O exemplo a seguir demonstra as camadas de anotação que estão disponíveis no gráfico Web Components. Clique nas caixas de seleção para ativar e desativar cada camada.

Gostou deste exemplo? Tenha acesso ao nosso kit de ferramentas completo Web Components e comece a criar seus próprios aplicativos em minutos. Baixe-o gratuitamente.

Web Components Crosshair Layer

O IgcCrosshairLayerComponent é renderizado como linhas cruzadas que se cruzam no valor real de cada série que elas estão configuradas para atingir, com cada série renderizando um conjunto separado de linhas.

Os tipos de mira incluem:

• Horizontal
• Vertical
• Ambos

A mira do gráfico também pode ser configurada para se ajustar aos pontos de dados, definindo a crosshairsSnapToData propriedade como true, caso contrário, a mira será interpolada entre os pontos de dados. As anotações também podem ser ativadas para exibir o valor da mira ao longo do eixo.

Você pode configurar a camada de mira para que a camada seja exibida apenas em uma série específica, pois, por padrão, elas terão como alvo todas as séries no controle de gráfico. Para conseguir isso, defina a targetSeries propriedade.

Por padrão, a cor das linhas de mira é uma cor mais clara do que a série com a qual ela está interagindo. No entanto, essa configuração padrão pode ser substituída para que você possa selecionar uma cor que será usada para as linhas de mira. Isso é feito definindo a brush propriedade da camada de mira.

O exemplo a seguir mostra como configurar a camada de mira, mas direcionando uma única série, definindo o tipo como vertical e estilizando a cor do pincel.

Web Components Final Value Layer

O IgcFinalValueLayerComponent do controle IgcDataChartComponent fornece uma visualização rápida ao longo do eixo do valor final exibido em uma série.

Você pode configurar esta anotação para direcionar uma série específica se desejar ter várias camadas de valor final presentes com diferentes configurações. Isso pode ser feito definindo a targetSeries propriedade.

Você também pode personalizar essa anotação definindo as seguintes propriedades:

• axisAnnotationBackground: Esta propriedade é usada para escolher o pincel para a cor de fundo da anotação. O padrão é usar o pincel da série.
• axisAnnotationTextColor: Esta propriedade é usada para escolher o pincel para a cor do texto da anotação.
• axisAnnotationOutline: essa propriedade é usada para escolher o pincel para a cor do contorno da anotação.

O exemplo a seguir demonstra como estilizar a anotação da camada de valor final definindo as propriedades listadas acima.

<igc-category-chart
     id="chart"
     final-value-annotations-visible="true">
</igc-category-chart>

Web Components Callout Layer

O IgcCalloutLayerComponent exibe anotações de dados existentes ou novos no controle do gráfico. As anotações aparecem ao lado dos valores de dados fornecidos na fonte de dados.

Use as anotações de texto explicativo para exibir informações adicionais, como notas ou detalhes específicos sobre pontos de dados, que você gostaria de apontar para seus usuários.

Você pode configurar os textos explicativos para direcionar uma série específica se quiser ter várias camadas de texto explicativo presentes com configurações diferentes. Isso pode ser feito definindo a targetSeries propriedade.

Você também pode personalizar essa anotação definindo as seguintes propriedades:

• calloutLeaderBrush: Esta propriedade é usada para escolher o pincel para as linhas de chamada para as chamadas de detalhe para a camada.
• calloutOutline: essa propriedade é usada para escolher o pincel para a cor do contorno da anotação.
• calloutBackground: Esta propriedade é usada para escolher o pincel para a cor de fundo da anotação. O padrão é usar o pincel da série.
• calloutTextColor: Esta propriedade é usada para escolher o pincel para a cor do texto da anotação.
• calloutStrokeThickness: essa propriedade é usada para escolher a espessura do suporte do texto explicativo.
• calloutCornerRadius: essa propriedade é usada para curvar os cantos das chamadas de detalhe.
• allowedPositions: Esta propriedade é usada para escolher quais posições a camada de texto explicativo tem permissão para usar. Eg. superior, inferior

O exemplo a seguir demonstra como estilizar as anotações da camada de texto explicativo definindo as propriedades listadas acima:

<igc-category-chart
     id="chart"
     width="800px"
     height="400px"
     callouts-visible="true">
</igc-category-chart>

let chart = (document.getElementById("chart") as IgcCategoryChartComponent);

chart.dataSource = data;
chart.calloutsDataSource = categoryData;
chart.calloutsXMemberPath = "index";
chart.calloutsYMemberPath = "value";
chart.calloutsLabelMemberPath = "info";

API References

A seguir está uma lista de membros da API mencionados nas seções acima:

• crosshairsSnapToData
• IgcCategoryChartComponent