Anotações de gráficos React

As interações e anotações de hover do React chart são implementadas por meio de camadas de interação de hover, 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 hover diferente que pode ser usada individualmente ou combinada com outras para fornecer interações de hover poderosas.

React Annotations Example

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

Gostou deste exemplo? Tenha acesso ao nosso kit de ferramentas de React completo e comece a criar seus próprios aplicativos em minutos. Faça o download gratuitamente.

React Crosshair Layer

O IgrCrosshairLayer é 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.

React Final Value Layer

O IgrFinalValueLayer do controle IgrDataChart 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.

 <IgrCategoryChart
    dataSource={this.state.data}
    finalValueAnnotationsVisible={true} />

React Callout Layer

O IgrCalloutLayer 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:

 <IgrCategoryChart
    dataSource={this.state.data}
    calloutsVisible={true}
    calloutsDataSource={this.state.calloutData}
    calloutsXMemberPath="index"
    calloutsYMemberPath="value"
    calloutsLabelMemberPath="info" />

API References

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

• crosshairsSnapToData
• IgrCategoryChart