Chart-Maker — Aplicativo web para criação de gráficos e diagramas no navegador

Gerador online / offline, 29 tipos de gráficos, exportação para PNG JPEG WEBP AVIF SVG, histórico, instruções detalhadas, instalação do aplicativo

Para Usuários Aplicativos
Aplicativo Chart-Maker
Para Desenvolvedores Bibliotecas
Bibliotecas Chart-Maker
Configurações do gráfico
Avançado
JSON
Prévia
Como usar — instruções detalhadas

O painel «Configurações do gráfico» contém todos os controles; ao lado, uma prévia ao vivo é atualizada automaticamente a cada alteração. Em telas largas ficam lado a lado; no celular, empilhados, com a prévia abaixo das configurações.

Fluxo: 1) escolha um tipo de gráfico; 2) introduza um título e um nome do conjunto de dados; 3) preencha os dados na tabela abaixo; 4) desfaça ou refaça se necessário; 5) abra «Exportar» para baixar uma imagem ou salvar o projeto.

Existem 29 tipos, agrupados conforme a forma de introduzir os dados:

  • Rótulo / valor: barras, linhas, área, barras horizontais, circular, anel, radar, área polar, nuvem de palavras.
  • Pontos X / Y: dispersão (X, Y), bolhas (X, Y, tamanho).
  • Vários conjuntos de dados: empilhadas, agrupadas, multilinhas, combinado (cada conjunto é uma barra ou uma linha).
  • Categoria e lista de valores: diagrama de caixa, violino.
  • Hierarquia: treemap (rótulo, valor, grupo).
  • Grelha: mapa de calor (X, Y, valor).
  • Fluxos: sankey (de, para, fluxo).
  • Mapa: coroplético (país escolhido de uma lista, valor).
  • Barras com barras de erro
  • Velas / OHLC
  • Funil
  • Venn
  • Grafo (rede)
  • Medidor
  • Função (y = f(x))

A tabela de dados adapta-se ao tipo escolhido. «Adicionar linha» acrescenta uma entrada, a cruz remove uma.

  • Rótulo / valor: um rótulo e um número.
  • Pontos: X e Y (as bolhas também têm tamanho).
  • Vários conjuntos de dados: as categorias são separadas por vírgulas, os valores de cada conjunto são uma lista de números separados por vírgulas; no combinado cada conjunto é definido como barra ou linha.
  • Caixa / violino: uma lista de números separados por vírgulas no campo de valores.
  • Mapa de calor: X, Y (categorias) e um valor.
  • Sankey: de, para e a quantidade do fluxo.
  • Coroplético: o país é escolhido numa lista pendente (nomes no idioma da interface), mais um valor.
  • Barras com barras de erro: Rótulo, Valor, Erro.
  • Velas / OHLC: Data, O/H/L/C.
  • Funil: Rótulo, Valor.
  • Venn: Conjuntos (separados por vírgula), Valor.
  • Grafo (rede): Nós (separados por vírgula), De/Para.
  • Medidor: Valor, Máx.
  • O tipo Função traça y = f(x). Digite uma expressão — ex. sin(x), x^2, sqrt(x) — o intervalo X (mín e máx) e o número de pontos. O Função avalia a expressão e desenha a curva; a fórmula também aparece na lista de dados abaixo do gráfico.

O botão «Exportar» abre uma janela.

  • Formato: PNG, JPEG, WEBP, AVIF (um formato real, codificado no navegador — o codificador é carregado na primeira utilização) e SVG (vetorial).
  • Largura e altura — tamanho da imagem em píxeis; vazio significa o tamanho atual do gráfico.
  • Baixar imagem — guarda a imagem; são adicionados um fundo e a lista de dados por baixo do gráfico.
  • Salvar projeto — um arquivo .json com todas as configurações; a caixa «Incluir histórico e registro» adiciona-os ao arquivo.
  • em combo/múltiplo cada conjunto pode usar o eixo Y esquerdo ou direito.

O botão «Importar» abre uma janela com uma zona onde pode largar um arquivo de projeto .json ou clicar para selecionar. Depois de escolhido o arquivo, o botão «Aplicar projeto» fica ativo e carrega as configurações (e o histórico e o registro, se tiverem sido guardados).

  • Ctrl/Cmd + Z — desfazer
  • Ctrl/Cmd + Y ou Ctrl/Cmd + Shift + Z — refazer
  • Ctrl/Cmd + S — salvar projeto
  • Ctrl/Cmd + E — janela de exportação
  • Ctrl/Cmd + O — janela de importação
  • Ctrl/Cmd + J — registro
  • Ctrl/Cmd + , — configurações

Nos campos de introdução, Ctrl+Z e Ctrl+Y funcionam como edição de texto normal.

  • Desfazer / Refazer: recuar e avançar nas alterações de dados e configurações.
  • Registro: guarda ações, dicas e erros; pode ser limpo.

A seção «Avançado» acima da tabela agrupa configurações opcionais: subtítulo; suavização, linhas em degraus, tracejadas e preenchidas; eixo Y empilhado e logarítmico; dizimação; posição da legenda; tamanho do ponto e espessura da linha; duração e suavização da animação; e efeitos sob demanda — rótulos, zoom/deslocamento, anotações, linha de tendência e cruz de mira. Em gráficos combinados e múltiplos cada conjunto pode usar o eixo Y esquerdo ou direito. Cada opção aparece apenas para os tipos aplicáveis.