Chart-Maker — Aplicação web para a 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 da aplicação

Para Utilizadores Aplicações
Aplicação Chart-Maker
Para Desenvolvedores Bibliotecas
Bibliotecas Chart-Maker
Definições do gráfico
Avançado
JSON
Pré-visualização
Como usar — instruções detalhadas

O painel «Definições do gráfico» contém todos os controlos; ao lado, uma pré-visualização ao vivo atualiza-se automaticamente a cada alteração. Em ecrãs largos ficam lado a lado; no telemóvel, empilhados, com a pré-visualização por baixo das definiçõ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 descarregar uma imagem ou guardar 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). Introduza uma expressão — p. 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 sob o 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.
  • Descarregar imagem — guarda a imagem; são adicionados um fundo e a lista de dados por baixo do gráfico.
  • Guardar projeto — um ficheiro .json com todas as definições; a caixa «Incluir histórico e registo» adiciona-os ao ficheiro.
  • 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 ficheiro de projeto .json ou clicar para selecionar. Depois de escolhido o ficheiro, o botão «Aplicar projeto» fica ativo e carrega as definições (e o histórico e o registo, se tiverem sido guardados).

  • Ctrl/Cmd + Z — desfazer
  • Ctrl/Cmd + Y ou Ctrl/Cmd + Shift + Z — refazer
  • Ctrl/Cmd + S — guardar projeto
  • Ctrl/Cmd + E — janela de exportação
  • Ctrl/Cmd + O — janela de importação
  • Ctrl/Cmd + J — registo
  • Ctrl/Cmd + , — definiçõ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 definições.
  • Registo: guarda ações, dicas e erros; pode ser limpo.

A secção «Avançado» acima da tabela agrupa definiçõ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 a pedido — 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.