Chart.js 系列课程
第 10 课:坐标轴与刻度
掌握 scales 配置,控制坐标轴标题、刻度、网格线与最值范围。
本课你会学到什么
scales 是柱形图、折线图、散点图等坐标类图表最重要的配置区域。
你会学到如何控制轴标题、刻度步长、最小最大值、网格线颜色。
本课能帮你解决“图虽然画出来了,但读起来不够专业”的问题。
图表示例
坐标轴与刻度设置
通过清晰的轴标题与刻度配置,让图表更可读。
如何自定义成你自己的图表
如果横轴和纵轴的含义不够明确,优先加
title.text
。
如果你想让纵轴只显示固定间隔,改
ticks.stepSize
。
如果图表上下留白太多,可以调
min
和
max
。
如果网格线太抢眼,可以把
grid.color
改浅,甚至关闭网格线。
课后练习建议
把本课单位改成“元”或“分钟”,并同步改轴标题。
把纵轴最大值改成 300,看看视觉变化。
只保留 y 轴网格线,隐藏 x 轴网格线。
课程导航
上一课
返回首页
下一课