Visão geral de gráficos e tabelas React

Ignite UI for React Charts & Graphs é uma extensa biblioteca de visualizações de dados que permite gráficos e painéis interativos e impressionantes para seus aplicativos da web e móveis. Construído para velocidade e beleza, projetado para funcionar em todos os navegadores modernos e com toque e interatividade completos, você pode criar visuais responsivos de forma rápida e fácil em seu próximo aplicativo em qualquer dispositivo.

O Ignite UI for React Charts suporta mais de 65 tipos de séries e combinações que permitem que você visualize qualquer tipo de dado, incluindo Category Series, Financial Series, Polar Series, Radial Series, Range Series, Scatter Series, Shape Series e Geospatial Series. Não importa o tipo de comparação que você esteja fazendo, ou que tipo de história de dados você esteja tentando contar, você pode representar seus dados de qualquer uma destas maneiras:

Mudança ao longo do tempo
Comparação
Correlação
Distribuição
Geoespacial
Visão geral + detalhes
Parte para o Todo
Classificação

Potencialize suas visualizações mais exigentes com os gráficos React Infragistics!

React Chart and Graph Types

O produto React tem mais de 65 tipos diferentes de gráficos e tabelas para qualquer cenário – de uma única exibição de gráfico a um painel interativo. Você pode criar gráficos React como Pizza, Barra, Área, Linha, Ponto, Empilhado, Donut, Dispersão, Medidor, Polar, Treemap, Ações, Financeiro, Mapas Geoespaciais e muito mais para seus aplicativos móveis ou da web. O benefício do nosso gráfico React em relação a outros é o suporte total para recursos como:

Web design responsivo integrado
Panorâmica e zoom interativos com mouse, teclado e toque
Controle total da animação do gráfico
Eventos de detalhamento do gráfico
Suporte de streaming em tempo real
Suporte de alto volume (milhões de pontos de dados)
Linhas de tendências e outros recursos de análise de dados

Construído com um design modular de eixos, marcadores, séries, legendas e camadas de anotação, o gráfico React facilita o design e a renderização de qualquer tipo de história de dados. Crie um gráfico simples com uma única série de dados ou crie histórias de dados mais complexas com várias séries de dados, com vários eixos em visualizações compostas.

Category and Financial Chart vs. Data Chart

O React Category and Financial Chart é o que chamamos de nossos gráficos específicos de domínio. É um wrapper em torno do React Data Chart que assume que seu domínio é uma categoria ou série de preços financeiros.

Escolher esses gráficos de domínio específicos permite simplificar a API e desenhar muitas interfaces sobre os dados para configurar automaticamente o cenário do gráfico, tudo sem precisar definir explicitamente atributos como eixos, séries e anotações. Em contraste, o gráfico de dados é muito explícito e cada parte crítica do gráfico precisa ser definida.

Os gráficos de domínio usam um gráfico de dados em seu núcleo; portanto, as mesmas otimizações de desempenho se aplicam a ambos. A diferença está em se eles estão tentando tornar as coisas muito fáceis de especificar para o desenvolvedor ou ser o mais flexível possível. React Data Chart é mais detalhado, desbloqueando todos os nossos recursos de gráficos de que você precisa, permitindo que você misture e combine qualquer número de séries, eixos ou anotações, por exemplo. Para os gráficos de categoria e financeiros, pode haver uma situação que não pode ser feita facilmente para a qual o gráfico de dados é mais adequado, como uma série com uma série de dispersão com um eixo x numérico.

Pode ser difícil saber qual gráfico escolher primeiro. É crucial entender o tipo de série e quantos recursos adicionais você deseja apresentar. Para uma categoria básica mais leve ou série financeira, recomendamos usar um dos gráficos de domínio. Para cenários mais avançados, recomendamos usar o React Data Chart, como apresentar algo diferente do que é coberto pela propriedade chartType do gráfico de categoria, como uma série empilhada ou dispersa, ou dados numéricos ou baseados em tempo. Vale a pena notar que o React Financial Chart cobre apenas tipos de séries de coluna, barra OHLC, candlestick e linha.

Facilitamos o uso da categoria React e do gráfico financeiro. A boa notícia é que você sempre pode mudar para o gráfico de dados no futuro.

React Bar Chart

O React Bar Chart, ou Bar Graph, está entre os tipos de gráficos de categoria mais comuns usados para comparar rapidamente frequência, contagem, total ou média de dados em diferentes categorias com dados codificados por barras horizontais de largura igual e comprimentos diferentes. Eles são ideais para mostrar variações no valor de um item ao longo do tempo, distribuição de dados, classificação de dados classificados (alto para baixo, pior para melhor). Os dados são representados usando uma coleção de retângulos que se estendem da esquerda para a direita do gráfico em direção aos valores dos pontos de dados. Saiba mais sobre nosso gráfico de barras

React Pie Chart

O Gráfico de pizza React, ou Gráfico de pizza, é um tipo de gráfico de parte para todo muito comum. Os gráficos de parte para todo mostram como as categorias (partes) de um conjunto de dados somam um valor total (todo). As categorias são mostradas em proporção a outras categorias com base em sua porcentagem de valor em relação ao valor total que está sendo analisado. Um gráfico de pizza renderiza valores de dados como seções em um gráfico circular ou em formato de pizza. Cada seção, ou fatia de pizza, tem um comprimento de arco proporcional ao seu valor de dados subjacente. Os valores totais representados pelas fatias de pizza representam um valor inteiro, como 100 ou 100%. Os gráficos de pizza são perfeitos para pequenos conjuntos de dados e são fáceis de ler rapidamente. Saiba mais sobre nosso gráfico de pizza

React Line Chart

O React Line Chart, ou Line Graph é um tipo de gráfico de linha de categoria que mostra os valores de dados contínuos representados por pontos conectados por segmentos de linha reta de uma ou mais quantidades ao longo de um período de tempo para mostrar tendências e realizar análises comparativas. O eixo Y (rótulos no lado esquerdo) mostra um valor numérico, enquanto o eixo X (rótulos na parte inferior) mostra uma série temporal ou categoria de comparação. Você pode incluir um ou mais conjuntos de dados para comparar, o que seria renderizado como várias linhas no gráfico. Saiba mais sobre nosso gráfico de linhas

React Donut Chart

O React Donut Chart ou Donut Graph, é uma variante de um Pie Chart, ilustrando proporcionalmente as ocorrências de uma variável em um círculo para representar partes de um todo. O donut chart tem uma abertura circular no centro do gráfico de pizza, onde um título ou explicação de categoria pode ser exibido. Os donut charts podem suportar vários anéis concêntricos, com suporte integrado para visualizar dados hierárquicos. Saiba mais sobre nosso Donut chart

React Area Chart

O React Area Chart é renderizado usando uma coleção de pontos conectados por segmentos de linha reta com a área abaixo da linha preenchida. Os valores são representados no eixo y (rótulos no lado esquerdo) e as categorias são exibidas no eixo x (rótulos inferiores). Os gráficos de área enfatizam a quantidade de mudança ao longo de um período de tempo ou comparam vários itens, bem como o relacionamento de partes de um todo, exibindo o total dos valores plotados. Saiba mais sobre nosso gráfico de área

React Sparkline Chart

O Sparkline Chart React, ou Sparkline Graph, é um tipo de gráfico de categoria destinado à renderização em um layout de pequena escala, como em uma célula de grade, ou em qualquer lugar em que uma visualização do tamanho de uma palavra seja necessária para contar uma história de dados. Como outros tipos de gráfico React, o Sparkline Chart tem vários elementos visuais e recursos correspondentes que podem ser configurados e personalizados, como o tipo de gráfico, marcadores, intervalos, linhas de tendência, plotagem de valor desconhecido e dicas de ferramentas. Os gráficos Sparkline podem ser renderizados como um gráfico de linha, gráfico de área, gráfico de coluna ou gráfico de ganhos/perdas. A diferença entre o gráfico de tamanho completo equivalente ao Spark-chart é que o eixo Y (rótulos do lado esquerdo) e o eixo X (rótulos inferiores) não são visíveis. Saiba mais sobre nosso gráfico Sparkline.

React Bubble Chart

O React Bubble Chart, ou Bubble Graph, é usado para mostrar dados compostos por três valores numéricos. Dois dos valores são plotados como um ponto de intersecção usando um sistema de coordenadas cartesianas (X, Y), e o terceiro valor é renderizado como o tamanho do diâmetro do ponto. Isso dá ao Bubble Chart seu nome - uma visualização de bolhas de tamanhos variados ao longo das coordenadas X e Y do gráfico. O React Bubble Chart é usado para mostrar relacionamentos de correlações de dados com as diferenças de valor de dados renderizadas por tamanho. Você também pode usar uma quarta dimensão de dados, normalmente cor, para diferenciar ainda mais os valores em seu Bubble chart. Saiba mais sobre nosso bubble chart.

React Financial / Stock Chart

O React Financial ou Stock Chart é uma visualização composta que renderiza dados de ações e dados financeiros em um gráfico de série temporal que inclui elementos visuais interativos em uma barra de ferramentas como filtros de dia/semana/mês, seleção de tipo de gráfico, seleção de tipo de volume, seleção de indicadores e seleção de linhas de tendências. Projetado para personalização, o React Stock Chart pode ser personalizado de qualquer forma para fornecer uma visualização e interpretação mais fácil de seus dados. O gráfico financeiro renderiza os dados de data e hora ao longo do eixo X (rótulos inferiores) e mostra campos como volumes Aberto, Alto, Baixo e Fechado. O tipo de gráfico para renderizar os dados de série temporal pode ser Barra, Vela, Coluna ou Linha. Saiba mais sobre nosso gráfico de ações.

React Column Chart

O React Column Chart, ou Column Graph, está entre os tipos de gráficos de categoria mais comuns usados para comparar rapidamente frequência, contagem, total ou média de dados em diferentes categorias com dados codificados por barras verticais de largura igual e comprimentos diferentes. Eles são ideais para mostrar variações no valor de um item ao longo do tempo, distribuição de dados, classificação de dados classificados (alto para baixo, pior para melhor). Os dados são representados usando uma coleção de retângulos que se estendem de cima para baixo do gráfico em direção aos valores dos pontos de dados. Saiba mais sobre nosso gráfico de colunas.

React Composite Chart

O React Composite Chart, também chamado de Combo Chart, é uma visualização que combina diferentes tipos de gráficos na mesma área de plotagem. É muito útil ao apresentar duas séries de dados que têm uma escala muito diferente e podem ser expressas em unidades diferentes. O exemplo mais comum é dólares em um eixo e porcentagem no outro eixo. Saiba mais sobre nosso gráfico composto.

React Polar Chart

O Gráfico de Área Polar React ou Gráfico Polar pertence a um grupo de gráficos polares e tem o formato de um polígono preenchido cujos vértices ou cantos estão localizados nas coordenadas polares (ângulo/raio) dos pontos de dados. O Gráfico de Área Polar usa os mesmos conceitos de plotagem de dados que o Gráfico de Dispersão, mas envolve os pontos de dados em um círculo em vez de esticá-los horizontalmente. Assim como com outros tipos de séries, vários Gráficos de Área Polar podem ser plotados no mesmo gráfico de dados e podem ser sobrepostos uns aos outros para mostrar diferenças e similaridades entre conjuntos de dados. Saiba mais sobre nosso gráfico polar.

React Scatter Chart

O React Scatter Chart, ou Scatter Graph, é usado para mostrar a relação entre dois valores usando um sistema de coordenadas cartesianas (X, Y) para plotar dados. Cada ponto de dados é renderizado como o ponto de intersecção do valor de dados nos eixos X e Y. Os gráficos de dispersão chamam a atenção para intervalos irregulares ou clusters de dados. Eles podem destacar o desvio dos dados coletados dos resultados previstos e são frequentemente usados para plotar dados científicos e estatísticos. O React Scatter Chart organiza e plota dados cronologicamente (mesmo que os dados não estejam em ordem cronológica antes da vinculação) nos eixos X e Y. Saiba mais sobre nosso gráfico de dispersão.

React Shape Chart

Os React Shape Charts são um grupo de gráficos que pegam uma matriz de formas (matriz ou matrizes de pontos X/Y) e as renderizam como uma coleção de polígonos ou polilinhas no sistema de coordenadas cartesianas (x, y). Eles são frequentemente usados para destacar regiões em dados científicos ou podem ser usados para plotar diagramas, plantas ou até mesmo plantas baixas de edifícios. Saiba mais sobre nosso gráfico de formas.

React Spline Chart

O React Spline Chart, ou Spline Graph é um tipo de gráfico de linha de categoria que mostra os valores de dados contínuos representados por pontos conectados por segmentos de linha suaves de uma ou mais quantidades ao longo de um período de tempo para mostrar tendências e realizar análises comparativas. O eixo Y (rótulos no lado esquerdo) mostra um valor numérico, enquanto o eixo X (rótulos na parte inferior) mostra uma série temporal ou categoria de comparação. Você pode incluir um ou mais conjuntos de dados para comparar, o que seria renderizado como várias linhas no gráfico. O gráfico React Spline é idêntico ao gráfico React Spline, a única diferença é que o gráfico de linha é pontos conectados por linhas retas, e os pontos do gráfico spline são conectados por curvas suaves. Saiba mais sobre nosso gráfico spline.

React Step Chart

O React Step Chart, ou Step Graph, é um gráfico de categoria que renderiza uma coleção de pontos de dados conectados por linhas verticais e horizontais contínuas formando uma progressão em forma de degrau. Os valores são representados no eixo Y (rótulos à esquerda) e as categorias são exibidas no eixo X (rótulos na parte inferior). O gráfico React Step Line enfatiza a quantidade de mudança ao longo de um período de tempo ou compara vários itens. O gráfico React Step Line é idêntico ao React Step Area Chart em todos os aspectos, exceto que a área abaixo das linhas de degrau não é preenchida. Saiba mais sobre nosso gráfico de degrau

React Treemap

O Ignite UI for React Treemap exibe dados hierárquicos (estruturados em árvore) como um conjunto de nós aninhados. Cada ramo da árvore recebe um nó de treemap, que é então ladrilhado com nós menores representando sub-ramos. O retângulo de cada nó tem uma área proporcional a uma dimensão especificada nos dados. Frequentemente, os nós são coloridos para mostrar uma dimensão separada dos dados. Saiba mais sobre nossos treemaps.

React Charts Key Features

Mostre como seus dados mudam ao longo do tempo com nosso Time Axis integrado. Alteraremos dinamicamente escalas de tempo e formatos de rótulos, conforme você interage com seu gráfico. Incluímos um Financial Chart completo com todos os recursos que você espera em seus gráficos financeiros, como Yahoo Finance ou Google Finance.

Dynamic Charts

Visualize seus dados criando um novo Composite Chart e sobrepondo várias séries em um único gráfico. No Chart, você pode exibir e sobrepor várias colunas de gráfico para criar colunas empilhadas.

Custom Tooltips

Visualize seus dados criando novas visualizações compostas e sobrepondo várias séries em um único gráfico. No gráfico, você pode criar dicas de ferramentas personalizadas com imagens, vinculação de dados e até mesmo combinar dicas de ferramentas de várias séries em uma única dica de ferramenta.

High-Performance, Real-Time Charting

Exiba milhares de pontos de dados com atualizações em nível de milissegundos em tempo real com dados de streaming ao vivo. Você não experimentará atrasos, nenhuma oscilação de tela e nenhum atraso visual, mesmo ao interagir com o gráfico em um dispositivo de toque. Para uma demonstração, consulte o tópico Gráfico com alta frequência.

High-Volume Data Handling

Otimize o desempenho do gráfico para renderizar milhões de pontos de dados enquanto o gráfico continua fornecendo desempenho suave quando os usuários finais tentam aumentar/diminuir o zoom ou navegar pelo conteúdo do gráfico. Para uma demonstração, consulte o tópico Gráfico com alto volume.

Modular Design

O gráfico React é projetado para modularidade. Somente recursos que são necessários fazem parte da sua implantação, para que você tenha o menor footprint possível em suas páginas renderizadas.

Smart Data Binding

Deixe-nos escolher o tipo de gráfico. Nosso Adaptador de Dados inteligente escolhe automaticamente o melhor tipo de gráfico para os dados. Tudo o que você faz é definir a fonte de dados e nós fazemos o resto.

Trendlines

Os gráficos React oferecem suporte a todas as linhas de tendência que você precisa, incluindo linhas de tendência lineares (x), quadráticas (x2), cúbicas (x3), quárticas (x4), quínticas (x5), logarítmicas (log x), exponenciais (ex) e de lei de potência (axk + o(xk)).

Interactive Panning and Zooming

Use toque único ou múltiplo, teclado, barra de zoom, roda do mouse, arraste e selecione qualquer região retangular com o mouse para aumentar o zoom e ver de perto os pontos de dados, rolar o histórico de dados ou movimentar regiões de dados.

Markers, Tooltips, and Templates

Use um dos 10 tipos de marcadores ou crie seu próprio modelo de marcador para destacar dados ou use dicas de ferramentas simples ou gráficos multieixos e multiséries com dicas de ferramentas personalizadas para dar mais contexto e significado aos seus dados.

But Wait, There’s More!

Se você estiver considerando outros React Charts no mercado, aqui estão algumas coisas para pensar:

Incluímos mais de 65 tipos de gráficos React e gráficos de combinação, com a configuração mais simples do mercado com nosso adaptador de dados inteligente.
Nossos gráficos são otimizados em todas as plataformas, incluindo Angular, Blazor, jQuery/JavaScript, React, UNO, UWP, WPF, Windows Forms, WebComponents, WinUI e Xamarin. Eles oferecem suporte à mesma API e aos mesmos recursos em todas as plataformas.
Nosso gráfico de ações e gráficos financeiros oferece tudo o que você precisa para uma experiência semelhante à do Yahoo Finance ou Google Finance – tudo com uma única linha de código.
Testamos o desempenho de todos os outros. Todos dizem que são rápidos e conseguem lidar com muitos dados, mas podemos provar isso. Veja você mesmo como lidamos com dados de alto volume e streaming de dados em tempo real.
Estamos aqui 24x5. Infragistics tem suporte global que está sempre online. Para a América do Norte, Ásia-Pacífico, Oriente Médio e Europa, estamos no relógio quando você estiver!
Temos muito mais controles de UI no React além dos Charts. Oferecemos uma solução React completa para construir seus aplicativos!

API References

Todos os tipos de gráficos mencionados neste tópico são implementados nestes componentes de API: