CSV de exemplo
| Metric | Value |
|---|---|
| Trees planted | 1284500 |
| Volunteers | 18430 |
| Countries reached | 64 |
| Schools supported | 1207 |
How to Create a Number Ticker
A step by step walkthrough for building an animated counter in PlotSet, for one headline figure or a grid of statistics, with an embed code you can paste anywhere.
Cerca de 5 minutosYou will end up with a large number that counts up to its value when the page loads, with an optional prefix, suffix and caption.
Expect about five minutes. A single figure takes two, and a grid of statistics takes a little longer.
Os dados que você precisa
For a single figure no data is needed. For a grid, one row per statistic with a label and a value.
The value column is read as a number.
The label column becomes the caption under each counter.
In Single mode you can type the number in the settings and leave the sheet alone.
Write numbers without thousands separators in the sheet. The ticker adds them.
Os passos
O caminho exato no PlotSet, de um modelo em branco até o gráfico finalizado.
- 01
Open the Number Ticker template
From the PlotSet dashboard, start a new project and search for Number Ticker. It opens with a single counter that counts up to 1000.
Todo guia começa aqui. Escolha a categoria e depois o modelo: a grade é a mesma, seja qual for o tipo de gráfico que você quer. - 02
Pick a mode
In the Value tab, choose Single for one number, Template for text with numbers inside it, or From data for a counter per row.
A aba Preview de um gráfico do tipo Number Ticker. Todos os controles de estilo ficam no painel contornado em vermelho: aparência, cabeçalho, rodapé e as opções específicas desse tipo de gráfico. Cada grupo fica em sua própria aba. - 03
Enter the numbers
In Single mode, type the target and the start number. In From data mode, paste rows or import a CSV or .xlsx file.
A visualização de dados, aqui em um projeto de gráfico de barras. Envie um CSV, extraia os números de uma imagem com o Magic Import ou sincronize um Google Sheet. O painel é idêntico para todos os tipos de gráfico. - 04
Check the column bindings
Bind the value column to Value and the label column to Label. In Single mode with a typed value, you can skip this.
Os vínculos definem qual coluna vira o rótulo, qual fornece os valores e qual comanda a cor. O Auto Binding tenta adivinhá-los a partir dos seus cabeçalhos, então confira o resultado em vez de dar como certo. - 05
Format the figure
In the Number format tab, add a prefix or suffix, set the decimals and choose the grouping, or abbreviate large numbers.
- 06
Tune the animation
In the Animation tab, set the duration and easing, and choose whether the count repeats or runs once.
- 07
Style the text
The Typography and Number color tabs set the font, the size and the colour, including a gradient or a colour that changes with progress.
- 08
Publish and embed
Publish for a live chart and copy the embed code from the Share dialog. Reload the page to watch the count run.
É pelo Share que um gráfico finalizado vira um link público e um código de incorporação.
Comece pelo modelo de Number Ticker com dados de exemplo já carregados, depois substitua-os pelos seus.
Abrir o modeloPublique, incorpore ou exporte
A reta final é igual para todo tipo de gráfico: o Share transforma o gráfico em um link público interativo e em um código de incorporação; o Export gera um arquivo estático.
Share: link público e código de incorporação
Ativar o código de incorporação e o link público é o que publica o gráfico. O link pode ser enviado com segurança para qualquer pessoa, e o código de incorporação entra em qualquer página como um iframe que mantém a interatividade e os tooltips ao passar o mouse. Edite o gráfico depois e clique em Recreate para levar essas mudanças aos dois.
Export: SVG, PNG ou JPG
O Export grava uma cópia estática no tamanho que você precisar. O SVG continua nítido em qualquer escala e ainda pode ser editado em uma ferramenta de design; PNG e JPG são as escolhas seguras para slides e documentos. É o multiplicador de escala que garante uma imagem nítida em uma tela retina.
Dicas de estilo para um Number Ticker
Start near the target for small changes
A start number close to the target shows growth honestly. Start at zero for a figure that is new.
Keep the count short
Two to three seconds is enough for most pages.
Add a caption
A short line under the number says what it counts.
Abbreviate long figures
1.3M reads faster than 1,284,500 in a narrow embed.
Erros comuns ao fazer um Number Ticker
The number shows no thousands separator
Four digit numbers print without one. Figures of 10,000 and over get it.
The grid is empty
From data mode needs a value column. Check that it is bound and holds numbers.
The count has already finished
It runs when the chart loads. Reload the page to see it again.
The text is too small in a grid
Auto-fit shrinks the figures to the smallest cell. Reduce the columns or shorten the longest value.
Saiba mais sobre o Number Ticker
Não tem certeza se o Number Ticker é a escolha certa? Veja o que é, quando usar e quando evitar.
Number Ticker: perguntas frequentes
Yes. Set a start number higher than the target.
Crie seu Number Ticker agora
Grátis para começar com mais de 600 modelos. Sem cartão de crédito.