示例 CSV
| 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.
约 5 分钟You 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.
你需要的数据
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.
操作步骤
PlotSet 中从空白模板到完成图表的具体点击路径。
- 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.
每份指南都从这里开始：先选分类，再选模板，不管你要做哪种图表，用的都是同一个网格。 - 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.
Number Ticker 的「Preview」标签页。所有样式设置都在红框标出的这个面板里，每个设置各自占一个标签页：外观、标题、脚注，以及这种图表类型特有的选项。 - 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.
这里的数据视图取自一个条形图项目。你可以上传 CSV、用「Magic Import」从图片里提取数字，或同步 Google Sheet，每种图表类型的面板都一样。 - 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.
绑定决定哪一列作标签、哪一列提供数值、哪一列决定颜色。「Auto Binding」（自动绑定）会根据表头推测，所以要核对一遍，别想当然。 - 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.
点「Share」，完成的图表就会变成一个公开链接和一段嵌入代码。
从已加载示例数据的 Number Ticker 模板开始，再替换成你自己的数据。
打开模板发布、嵌入或导出
最后一段路对每种图表都一样：「Share」（分享）把图表变成一个在线的公开链接和一段嵌入代码，「Export」（导出）把它输出成静态文件。
Share：公开链接与嵌入代码
打开嵌入代码和公开链接的开关，图表就发布出去了。链接可以放心发给任何人；嵌入代码以 iframe 的形式放进任意页面，悬停提示和交互效果都会保留。之后修改了图表，点「Recreate」就能把改动同步到链接和嵌入代码两边。
Export：SVG、PNG 或 JPG
「Export」会按你需要的尺寸输出一份静态副本。SVG 放到多大都清晰，还能在设计工具里继续编辑；幻灯片和文档用 PNG 或 JPG 最稳妥。想让图片在高分屏上够锐利，关键就是那个倍数设置。
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.
制作 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.
深入了解 Number Ticker
不确定 Number Ticker 是否是正确选择？查看它是什么、何时使用以及何时不使用。
Number Ticker：常见问题
Yes. Set a start number higher than the target.
现在制作你的 Number Ticker
免费开始，600+ 模板任选。无需信用卡。