Chart.js v3：程序化动态修改Y轴标签的实用指南

// 1. 初始化图表数据和配置
const data = {
  labels: ['一月', '二月', '三月', '四月', '五月'],
  datasets: [{
    label: '销售额',
    data: [65, 59, 80, 81, 56],
    borderColor: 'rgb(239,96,36)',
    backgroundColor: 'rgba(239,96,36,0.2)',
    fill: true
  }]
};

const options = {
  plugins: {
    legend: {
      labels: {
        color: "white",
      }
    }
  },
  maintainAspectRatio: false,
  scales: {
    x: {
      title: {
        display: true,
        text: '月份',
        color: 'white'
      },
      grid: {
        color: 'rgb(239,96,36,0.5)',
        borderColor: '#ef6024'
      },
      ticks: {
        color: '#ffffff',
      }
    },
    y: {
      title: {
        display: true, // 确保标题显示
        text: '重量 (kg)', // 初始Y轴标签
        color: '#ffffff'
      },
      grid: {
        color: 'rgb(239,96,36,0.5)',
        borderColor: '#ef6024'
      },
      ticks: {
        color: '#ffffff',
        beginAtZero: true
      }
    }
  }
};

// 2. 创建Chart实例
const config = {
  type: 'line',
  data: data,
  options: options,
};

const myChart = new Chart(
  document.getElementById('myChart'), // 确保页面中存在一个id为'myChart'的canvas元素
  config
);

// 3. 动态修改Y轴标签的函数
function updateYAxisLabel(newLabel) {
  // 核心：通过正确路径访问并修改Y轴标题文本
  myChart.options.scales.y.title.text = newLabel;

  // 确保Y轴标题的display属性为true，以防万一它被禁用
  myChart.options.scales.y.title.display = true; 

  // 调用update()方法使更改生效
  myChart.update();
  console.log(`Y轴标签已更新为: ${newLabel}`);
}

// 4. 模拟在某个事件后修改Y轴标签
// 例如，5秒后将Y轴标签从'重量 (kg)'改为'数量 (件)'
setTimeout(() => {
  updateYAxisLabel('数量 (件)');
}, 5000);

// 也可以通过按钮点击等事件触发
// document.getElementById('changeLabelBtn').addEventListener('click', () => {
//   updateYAxisLabel('新的单位');
// });

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>