Chart.js 在 3.0 版本中对坐标系配置做了一次大改版。v2 时期习惯的 options.scales.yAxes 数组写法在 v3 中已经不再适用，取而代之的是 options.scales.x 和 options.scales.y 这样的对象结构。这个变化不仅影响初始化配置，也直接改变动态修改标题的实现路径。很多从 v2 迁移过来的项目会继续沿用旧 API，结果导致 Y 轴标题无法更新，甚至控制台出现 Cannot read property 'scaleLabel' of undefined 一类的错误。要解决这个问题，必须先厘清 v3 的 scale 配置模型，再掌握通过 chart 实例动态修改标题的正确姿势。
Chart.js v3 坐标轴配置与 v2 的关键差异
在 v2 版本中，Y 轴标题被放在 scales.yAxes 数组里，每一个坐标轴对象使用 scaleLabel 字段来定义显示文字。开发者可能写过下面这样的配置：
// Chart.js v2 写法
options: {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: '销售额'
}
}]
}
}
这种写法在 v3 中已经完全失效。v3 将坐标轴配置改为按 scale id 组织的对象结构，Y 轴默认的 scale id 就是 y，标题配置统一放入 title 对象中，显示文字使用 text 字段。等价的 v3 配置如下：
// Chart.js v3+ 写法
options: {
scales: {
y: {
title: {
display: true,
text: '销售额'
}
}
}
}
理解这个差异非常重要，因为它直接决定了动态修改的路径。v2 中你可能通过 chart.options.scales.yAxes[0].scaleLabel.labelString 来更新标题，但在 v3 中，这个路径已经不存在。v3 的 scale 配置是一个对象而不是数组，并且 scaleLabel 被重命名为 title，labelString 被重命名为 text。因此，所有针对旧结构的动态修改代码都必须同步迁移，否则不仅标题不会更新，还可能因为访问了不存在的属性而抛出异常。
动态修改 Y 轴标题的两种实现方式
在 Chart.js v3 及以上版本中，动态修改 Y 轴标题的核心思路是：先拿到已经创建的 chart 实例，然后更新 chart.options.scales.y.title.text 的值，最后调用 chart.update() 触发图表重绘。这里的 update 方法会重新解析 options 中的相关配置，并把新的标题渲染到画布上。如果不调用 update，仅仅修改 JavaScript 对象里的字符串，画布不会自动发生变化，因为 Canvas 绘制结果不会被 Vue、React 这类响应式机制所驱动。
方式一最为直接，就是操作 chart.options 上的配置对象。以下是一个简单的函数封装：
function updateYAxisTitle(chart, newTitle) {
chart.options.scales.y.title.text = newTitle;
chart.update();
}
这种方式的好处是路径清晰，和静态配置的字段完全对应。你可以在按钮点击、下拉框切换、异步数据加载完成后调用这个函数。如果希望更新过程没有动画闪烁，可以给 update 传入参数 'none'，写成 chart.update('none')。这样标题会立即刷新，不会触发额外的过渡动画，尤其适合实时输入框或高频更新的场景。
方式二是先通过 chart.scales 拿到具体的 scale 实例，再修改该实例的 options.title.text。示例代码如下：
function updateYAxisTitleByScale(chart, newTitle) {
const yScale = chart.scales.y;
yScale.options.title.text = newTitle;
chart.update();
}
这种方式更接近底层 scale 对象的实际存储结构。在 Chart.js 内部，scale 实例会缓存自己的 options，因此直接修改 chart.scales.y.options 同样有效。两者的本质是一样的，区别只在于访问路径不同。日常开发中更推荐方式一，因为它和初始化配置保持同一套命名习惯，可读性更好。需要注意的是，如果你的 Y 轴并不是默认的 y，而是通过 id 指定了其他名称，例如 y1、salesAxis，那么上面代码中的 y 必须替换为实际的 scale id，否则会取不到对应坐标轴实例。
完整示例：输入框实时修改 Y 轴标题
下面通过一个完整的 HTML 页面来演示动态修改 Y 轴标题的实际效果。页面包含一个文本输入框、一个按钮和一个柱状图。用户可以在输入框中输入新的标题，点击按钮后图表立即更新。这个示例也展示了如何正确引入 Chart.js 并创建 chart 实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chart.js 动态修改 Y 轴标题</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div style="width: 80%; margin: 20px auto;">
<input type="text" id="yTitleInput" value="销售额" placeholder="输入新的 Y 轴标题">
<button id="updateBtn">更新标题</button>
<canvas id="myChart"></canvas>
</div>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['一月', '二月', '三月', '四月'],
datasets: [{
label: '订单量',
data: [120, 200, 150, 300],
backgroundColor: 'rgba(54, 162, 235, 0.6)'
}]
},
options: {
scales: {
y: {
title: {
display: true,
text: '销售额'
}
}
}
}
});
document.getElementById('updateBtn').addEventListener('click', function () {
const newTitle = document.getElementById('yTitleInput').value;
chart.options.scales.y.title.text = newTitle;
chart.update();
});
</script>
</body>
</html>
在这个示例中，初始化时 Y 轴标题显示为“销售额”。当用户在输入框里输入“订单金额”并点击按钮后，代码读取输入框的值，将其赋给 chart.options.scales.y.title.text，然后调用 chart.update()。整个过程不会重新创建图表，也不需要手动操作 Canvas DOM，标题会以极低的性能开销完成更新。如果想把点击按钮改成输入框实时监听，可以把 click 事件替换为 input 事件，并在回调中调用相同的更新逻辑。为了获得更好的实时体验，建议此时使用 chart.update('none') 来关闭动画。
多 Y 轴场景与常见注意事项
当图表包含多个 Y 轴时，动态修改标题需要特别注意 scale id 的区分。例如左侧 Y 轴使用默认 id y，右侧 Y 轴通过 y1 定义，那么修改右侧 Y 轴标题的代码应该写成 chart.options.scales.y1.title.text = '增长率'。如果左侧和右侧混淆，就会出现标题修改到了另一个坐标轴上的情况。多 Y 轴的定义方式与单 Y 轴类似，只是需要在 scales 对象中同时声明两个 scale，并为每个 scale 指定 position 和 title 配置。
除了文字内容，title 对象还支持颜色、字体、大小等样式字段。动态更新时可以同时修改这些属性，让标题根据业务状态改变样式。例如当数值超过预警阈值时，把 Y 轴标题改为红色：
// 多 Y 轴时按 scale id 修改
chart.options.scales.y1.title.text = '增长率';
chart.options.scales.y1.title.color = '#ff6384';
chart.options.scales.y1.title.font.size = 14;
chart.update('none');
实际开发中还有一些常见问题。第一，如果标题没有显示，先确认 title.display 是否为 true，因为 v3 默认可能不显示标题。第二，如果修改后控制台报 Cannot read properties of undefined，大概率是 scale id 写错了，或者表格初始化时还没有创建 chart 实例。第三，在 Vue、React 等框架中使用时，要保证拿到的 chart 实例不是已经被销毁的旧实例，否则调用 update 也会报错。第四，频繁更新标题时建议使用 chart.update('none') 跳过动画，避免视觉上的抖动。掌握这些细节后，你就能在 Chart.js v3 及以上版本中稳定、高效地动态修改 Y 轴标题，并能举一反三处理 X 轴标题、图例文字和 tooltip 内容等类似需求。
Chart.js动态修改Y轴标题JavaScript图表配置修改时间：2026-08-26 15:49:52