Chart.js 系列课程
第 5 课:雷达图
用雷达图比较多个维度的数据,例如技能、能力、指标完成度。
本课你会学到什么
雷达图适合比较多个维度,例如语言能力、产品能力、运动能力。
每个轴代表一个维度,离中心越远通常表示数值越高。
本课会演示一组能力评估数据,并说明如何加入第二组对象做对比。
图表示例
能力雷达图
一张图同时比较多个维度的表现。
如何自定义成你自己的图表
如果你要换成自己的评价维度,修改
labels
,例如“速度、质量、成本、稳定性”。
如果你要比较另一个人或另一个产品,只需要在
datasets
中再加一个对象。
想让区域更透明或更明显,可以修改
backgroundColor
的透明度。
如果你发现图太拥挤,减少维度数量通常比继续加样式更有效。
课后练习建议
增加第二组数据,例如“同学 B”或“竞品 B”。
把维度改成你自己的技能项。
把数值范围改到 0~10,并同步调整刻度设置。
课程导航
上一课
返回首页
下一课