A step by step walkthrough for building an animated race of lines, with flags or logos and a live rank label, in PlotSet.
Etwa 8 MinutenYou will end up with an animated chart where each contender's line grows across the stages, with a live rank at its head.
Expect about eight minutes. Most of it goes on shaping the data so there is one column for each stage.
One row per contender, with a column for each stage in running order and, if you want them, a category and a picture link.
| Country | Continent | Flag | Day 1 | Day 2 | Day 3 |
|---|---|---|---|---|---|
| United States | Americas | https://example.com/us.png | 4 | 12 | 20 |
| China | Asia | https://example.com/cn.png | 6 | 15 | 24 |
| Japan | Asia | https://example.com/jp.png | 2 | 7 | 13 |
| France | Europe | https://example.com/fr.png | 1 | 5 | 11 |
Use two or more stage columns, each a plain number, in the order the race runs.
The values should be running totals. If they are per stage, switch on the accumulate setting.
A category column colours the lines and builds the legend.
A picture column of image links replaces the plain circle at the head of each line.
Der genaue Klickpfad in PlotSet, von einer leeren Vorlage bis zum fertigen Diagramm.
From the PlotSet dashboard, start a new project and choose Horserace from the Line and Area Charts category. It loads with twelve countries over twelve days.
Import a CSV or .xlsx file, paste rows from a spreadsheet, or connect a Google Sheet. Each row is one contender.
Choose the name column, then select every stage column in running order. Add a category and a picture column if you have them.
In the Race tab, choose between score and rank, decide whether higher or lower wins, and limit the race to the top contenders.
The Lines tab sets the curve and width. The Runner heads tab sets the marker size and shape, and the Labels tab sets what each label says.
The Playback tab chooses autoplay, the time spent on each stage, easing and looping.
In the Captions tab, add timed notes for key moments. The Filter controls tab adds buttons that narrow the race to one group.
Publish for a live chart and copy the embed code from the Share dialog. Play it through once at the width of your page before you share it.
Starten Sie mit der Horserace Chart-Vorlage samt bereits geladenen Beispieldaten und ersetzen Sie diese durch Ihre eigenen.
Vorlage öffnenDer letzte Abschnitt ist bei jedem Diagrammtyp gleich: "Share" macht aus dem Diagramm einen öffentlichen Live-Link und einen Einbettungscode, "Export" schreibt es als statische Datei heraus.
Aktivieren Sie den Einbettungscode und den öffentlichen Link, um das Diagramm zu veröffentlichen. Den Link können Sie bedenkenlos an alle weitergeben, und der Einbettungscode fügt sich als iframe in jede Seite ein. Die Tooltips beim Überfahren mit der Maus und die volle Interaktivität bleiben erhalten. Wenn Sie das Diagramm später bearbeiten, überträgt "Recreate" die Änderungen auf Link und Einbettung.
"Export" schreibt eine statische Kopie in der Größe heraus, die Sie brauchen. SVG bleibt in jeder Skalierung scharf und lässt sich weiterhin in einem Design-Tool bearbeiten; PNG und JPG sind die sichere Wahl für Folien und Dokumente. Der Skalierungsfaktor sorgt dafür, dass das Bild auf einem Retina-Display gestochen scharf wirkt.
Showing the top eight or ten keeps the labels apart at the finish.
Flags and logos help, but only when they are easy to tell apart at a small size.
A restart pause on the loop gives readers time to read the final order.
A single note at the turning point does more than five.
A stage column is empty for that contender. Fill the gap or choose how missing data is handled in the Race tab.
The stage columns are bound in the wrong order. Reselect them from left to right.
The picture link is broken or blocked. Open it in a browser to check.
Too many contenders are close together. Limit the race, or turn on label spacing.
Nicht sicher, ob Horserace Chart die richtige Wahl ist? Erfahren Sie, was es ist, wann Sie es verwenden sollten und wann nicht.
Yes. Turn on autoplay in the Playback tab, and choose whether it loops.
Kostenlos starten mit über 300 Vorlagen. Keine Kreditkarte erforderlich.
