Gráficos e relatórios

Combine gráficos, tabelas e texto em um modelo para criar relatórios de vendas, marketing ou projetos. Criar seu próprio gráfico não exige comprar um design pronto de relatório.

Criar um gráfico no Gerador

1. Adicione um Gráfico em Recursos e escolha seu tipo e título no Inspetor.
2. Abra Editar dados do gráfico para alterar nomes de séries, cores, categorias e valores numéricos. Adicione séries ou linhas conforme necessário.
3. Aplicar transfere as alterações ao gráfico. Cancelar descarta as mudanças feitas no diálogo. Salve o modelo e verifique a prévia e as saídas.

Tipos e limites

São aceitos gráficos de colunas, barras horizontais, linhas, áreas, pizza e rosca. Seus códigos de tipo JSON são:

Os exemplos são desenhados pelo próprio mecanismo de gráficos do produto com as mesmas quatro linhas; apenas o código do tipo muda.

Cada gráfico aceita até 100 categorias e 6 séries. Gráficos de pizza e rosca permitem apenas uma série e rejeitam valores negativos.

Exemplo de elemento de modelo

Este objeto é um elemento gráfico no array elements de um modelo schemaVersion: 2, não uma solicitação completa de renderização. O exemplo armazena dados diretamente em content.data.

{
  "id": "monthly-revenue",
  "type": "chart",
  "placementMode": "flow",
  "layout": { "width": 100, "widthUnit": "percent", "height": 240 },
  "content": {
    "title": "Revenue",
    "data": [{ "month": "Jan", "revenue": 42 }, { "month": "Feb", "revenue": 52 }]
  },
  "chart": {
    "type": "bar",
    "labelField": "month",
    "series": [{ "field": "revenue", "label": "Revenue", "color": "#e3232a" }],
    "showLegend": true,
    "showValues": true
  }
}

Vincular dados dinâmicos

Para usar dados diferentes em cada documento, adicione binding: monthlyRevenue ao elemento gráfico e envie um array de objetos chamado monthlyRevenue nos dados da solicitação. Nesse caso, remova content.data. labelField seleciona o campo de categoria e cada campo de série seleciona seu valor numérico. Caminhos aninhados como sales.net são aceitos.

Números ausentes ou não finitos não viram zero; permanecem como lacunas em gráficos de linha e área. Corrija valores negativos de pizza ou rosca nos dados de origem. Algumas etiquetas podem ser omitidas em gráficos densos para evitar sobreposição.

Um relatório com dados reais

Um gráfico vinculado a monthlyRevenue lê o array de mesmo nome na solicitação. O modelo permanece igual; apenas os números chegam a cada chamada.

curl -X POST https://api.pdfgine.com/api/v1/render \
  -H "X-PDFgine-Key: $PDFGINE_KEY" \
  -H "Content-Type: application/json" \
  -d '{
        "templateCode": "sales-report",
        "format": "pdf",
        "locale": "pt",
        "data": {
          "monthlyRevenue": [
            { "month": "2026-01", "revenue": 42000, "target": 40000 },
            { "month": "2026-02", "revenue": 51500, "target": 45000 },
            { "month": "2026-03", "revenue": 47250, "target": 50000 }
          ]
        }
      }'

Cada objeto no array representa uma categoria. labelField seleciona o nome da categoria e cada campo de série seleciona um número do mesmo objeto.

Os problemas mais comuns

• binding e content.data são alternativas, não um par. Um gráfico com ambos continua desenhando os dados fixos, e sua solicitação parece ignorada.
• Os valores das séries devem ser números. "42.000,00" é uma string; formate para o leitor em um elemento de texto, não na série.
• Um gráfico aceita no máximo 100 pontos e 6 séries. Agregue os dados antes de enviar em vez de esperar que as linhas extras sejam desenhadas.
• No Word, o gráfico é uma imagem, não um gráfico Word editável. Quem espera clicar para editá-lo ficará desapontado; o PDF e o visualizador mostram o mesmo desenho.
• 100% é a largura da área que contém o elemento, não da folha. Dentro de uma coluna ou contêiner com preenchimento, é mais estreito que a página.

Comportamento da prévia e da saída

Os gráficos usam um renderizador SVG compartilhado. PDF e Visualizador preservam a aparência; exportações Word contêm imagens dos gráficos, não objetos de gráfico Word editáveis.

Uma largura de 100% é a largura disponível da área contenedora, não da folha inteira. Margens, colunas e preenchimento podem reduzir essa área.