PlotSet LogoPlotSet

How to Create a Radar Chart

A step by step walkthrough for turning a spreadsheet of scores into a published radar chart in PlotSet, from shaping the sheet to exporting or embedding the finished polygon.

约 9 分钟

By the end of this guide you will know how to create a radar chart from your own spreadsheet in PlotSet: items plotted as polygons across five or so shared measures, coloured on purpose, and either embedded on a page or exported as an image for a deck. Same click path a real chart takes, just with your items and your scores instead of a demo dataset.

If your scores are already on the same scale, plan on about nine minutes. Add another five if you are still converting raw numbers, dollars, percentages, ratings out of five, into one shared range, since that conversion is the step a radar chart cannot skip and most spreadsheets do not do for you.

你需要的数据

Wide format: one row per item, one column per measure. First column holds the item name, every column after it becomes one spoke, and all of those columns need to share the same scale before you upload.

示例 CSV
PhoneBatteryCameraPerformanceDisplayValue
iPhone 1579986
Galaxy S2488997
Pixel 879888
备注

Keep every measure column on the same scale, a score out of ten works well, before you upload. A stray column in dollars or raw units next to scores out of ten will still plot, it just will not mean anything.

The order of the columns becomes the order of the spokes going clockwise from the top. Decide that order in the spreadsheet, since it is easier to fix there than after the chart is styled.

Three items is a practical ceiling for one chart. A fourth overlapping polygon usually makes the chart harder to read, not more informative, so split into small multiples instead.

A blank cell renders as zero on that spoke rather than being skipped, which can make a strong item look weak on one axis. Fill it in or drop the row.

操作步骤

PlotSet 中从空白模板到完成图表的具体点击路径。

  1. 01

    Open the radar chart template

    From the PlotSet dashboard, start a new project and choose the Radar Chart template. It loads with sample data already bound to the spokes, so you can see the wide column layout PlotSet expects before you bring in your own file.

    PlotSet 的模板选择界面:左侧是图表分类列表,中间展开 Bar Charts 分类的模板网格,Bar Chart 模板卡片上显示「Select」按钮。
    每份指南都从这里开始:先选分类,再选模板,不管你要做哪种图表,用的都是同一个网格。
  2. 02

    Shape your sheet: one item per row, one measure per column

    Put the item name in the first column and one measure in each column after it, with a short header for each. If your source is a long-format export with an item, measure, value column each, pivot it into this wide shape first, PlotSet's radar template reads columns as spokes, not rows.

  3. 03

    Normalize every measure to the same scale

    Convert every column to the same range, a score out of ten, a percentage, a percentile, before you upload. This is the step that decides whether the finished polygon means anything, and it has to happen in the spreadsheet: PlotSet plots whatever numbers it is given.

  4. 04

    Upload your file or connect a sheet

    Use the data panel to import a CSV or .xlsx file, paste rows directly, or connect a Google Sheet if you want the chart to pick up later edits without a re-upload. PlotSet reads the first row as your spoke labels automatically.

    PlotSet 编辑器的数据视图:表格中 Name、Value、Region 三列填着加拿大各省的数据,旁边的「Data」面板提供 CSV 上传、「Magic Import」和 Google Sheet 同步。
    这里的数据视图取自一个条形图项目。你可以上传 CSV、用「Magic Import」从图片里提取数字,或同步 Google Sheet,每种图表类型的面板都一样。
  5. 05

    Check the column binding covers every measure

    Open the data binding panel and confirm the range extends to your last column. The template's default binding is set for its sample data, and a sheet with more measures than the sample will silently drop the extra columns if you do not widen it.

    PlotSet 数据面板中高亮的列绑定:「Label/time」对应 A 列,「Values」对应 B 列,「Filter/color」对应 C 列,下方是「Auto Binding」按钮。
    绑定决定哪一列作标签、哪一列提供数值、哪一列决定颜色。「Auto Binding」(自动绑定)会根据表头推测,所以要核对一遍,别想当然。
  6. 06

    Fix the spoke order and set the axis minimum to zero

    Confirm the spokes read in the order you intended, since that order came straight from your column order. Then check the radial axis starts at zero: a minimum set above zero shrinks every gap and flatters whichever item scored lowest.

  7. 07

    Style: light fills, one colour per item, label a ring

    Give each item its own colour and drop the fill opacity so overlapping polygons stay readable. Turn on a label for at least one grid ring so the reader has a value to anchor the shape against, not just an unmarked web of lines.

    PlotSet 编辑器停在「Preview」标签页:画布上是做好的 Radar Chart,右侧的设置面板用红框标出。
    Radar Chart 的「Preview」标签页。所有样式设置都在红框标出的这个面板里,每个设置各自占一个标签页:外观、标题、脚注,以及这种图表类型特有的选项。
  8. 08

    Publish, embed or export

    Publish for a live, interactive chart with hover tooltips and a shareable link, grab the embed code to drop it into a page, or export a PNG, SVG or PDF if you need a static image for a report.

从已加载示例数据的 Radar Chart 模板开始,再替换成你自己的数据。

打开模板

发布、嵌入或导出

最后一段路对每种图表都一样:「Share」(分享)把图表变成一个在线的公开链接和一段嵌入代码,「Export」(导出)把它输出成静态文件。

Share:公开链接与嵌入代码

打开嵌入代码和公开链接的开关,图表就发布出去了。链接可以放心发给任何人;嵌入代码以 iframe 的形式放进任意页面,悬停提示和交互效果都会保留。之后修改了图表,点「Recreate」就能把改动同步到链接和嵌入代码两边。

PlotSet 编辑器工具栏中高亮的「Share」按钮,紧挨着「Export」按钮。
点「Share」,完成的图表就会变成一个公开链接和一段嵌入代码。
PlotSet 的「Share」对话框:用于启用嵌入代码和公开链接的开关,「Link」「Embed」「Facebook」「Reddit」「Twitter」「LinkedIn」「Email」几个按钮,以及带「Copy」按钮的图表公开链接。
打开嵌入代码和公开链接的开关,然后复制链接或取用 iframe。之后再修改图表,点「Recreate」就能把改动同步给所有已拿到链接的人。

Export:SVG、PNG 或 JPG

「Export」会按你需要的尺寸输出一份静态副本。SVG 放到多大都清晰,还能在设计工具里继续编辑;幻灯片和文档用 PNG 或 JPG 最稳妥。想让图片在高分屏上够锐利,关键就是那个倍数设置。

PlotSet 编辑器工具栏中高亮的「Export」按钮。
要做成幻灯片或报告里的静态文件,就走「Export」这条路。
PlotSet 的「Export chart」对话框:倍数选择器设为 2x,宽高输入框填的是 1000 和 600,展开的格式菜单里列出 SVG、PNG 和 JPG。
SVG 放到多大都清晰,还能在设计工具里继续编辑;做幻灯片用 PNG 或 JPG 最稳妥。导出前先设好倍数,图片在高分屏上才够锐利。

Radar Chart 的样式提示

Cap it at three polygons

Two items compare cleanly and three is workable if the colours are distinct. A fourth polygon starts occluding the others no matter how translucent the fill is. Past three, build one small radar per item instead, same axes, same order, side by side.

Order the spokes by story, not by spreadsheet habit

Group related measures next to each other, cost-type measures on one side and quality-type measures on the other, for instance. The order is doing real work: it decides which parts of the silhouette sit next to each other.

Keep fill low and outlines strong

Somewhere around 15 to 25 percent opacity on the fill lets overlapping shapes stay legible, while a solid outline keeps each polygon identifiable even where two fills stack on top of each other.

Label the axis, not just the spokes

Spoke names alone tell a reader what is being measured, not how far out is good. Add value labels or ring labels so somebody unfamiliar with your scale can still read the chart correctly.

制作 Radar Chart 时的常见错误

One spoke sits flat at the centre for every item

The column binding stopped short of your last column, so PlotSet never read that measure. Open the data binding panel and widen the range to cover every column in your sheet, then check the chart updates.

The polygons come out in a different order than you planned

Spoke order follows column order in the source sheet exactly, not the order you had in your head. Reorder the columns in your spreadsheet and re-upload rather than trying to fix it after the chart is styled.

One item's shape balloons out on a single axis

Almost always a column that never got normalized, dollars or raw counts sitting next to scores out of ten. Go back to the source sheet, convert that column to the same scale as the rest, and re-upload.

深入了解 Radar Chart

不确定 Radar Chart 是否是正确选择?查看它是什么、何时使用以及何时不使用。

关于 Radar Chart

Radar Chart:常见问题

Wide format, with one row per item and one column per measure. The first column holds the item's name, and every column after it becomes one spoke, so a five-measure comparison needs six columns total, all on the same scale.

现在制作你的 Radar Chart

免费开始,300+ 模板任选。无需信用卡。