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

AsIgrCrosshairLayer renderizações se cruzam como linhas que se cruzam no valor real de cada série que estão configuradas para direcionar, 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 encaixar em pontos de dados ao definir acrosshairsSnapToData propriedade como verdadeira, caso contrário as miras serão interpoladas entre os pontos de dados. 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 ela seja exibida apenas em uma série específica, já que por padrão elas vão direcionar todas as séries no controle do gráfico. Para isso, defina otargetSeries imóvel.

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

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

OIgrFinalValueLayer controleIgrDataChart do controle oferece uma visão rápida ao longo do eixo do valor final exibido em uma série.

Você pode configurar essa anotação para direcionar uma série específica se quiser ter múltiplas camadas de valor final presentes com configurações diferentes. Isso pode ser feito ao estabelecer atargetSeries propriedade.

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

• axisAnnotationBackground: Essa propriedade é usada para escolher o pincel para a cor de fundo da anotação. O padrão é usar o pincel da série.
• axisAnnotationTextColor: Essa 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

EleIgrCalloutLayer 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 callouts para direcionar uma série específica se quiser ter múltiplas camadas de callout presentes com configurações diferentes. Isso pode ser feito definindo otargetSeries imóvel.

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

• calloutLeaderBrush: Essa propriedade é usada para escolher o pincel para as linhas de linha de liderança para os chamados da camada.
• calloutOutline: Essa propriedade é usada para escolher o pincel para a cor do contorno da anotação.
• calloutBackground: Essa propriedade é usada para escolher o pincel para a cor de fundo da anotação. O padrão é usar o pincel da série.
• calloutTextColor: Essa 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 callout.
• calloutCornerRadius: Essa propriedade é usada para curvar os cantos das chamadas.
• allowedPositions: Essa propriedade é usada para escolher quais posições a camada de chamada pode usar. Por exemplo, Cima, Embaixo

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