Chart.js v3 动态修改 Y 轴标题的专业指南

const options = {
  scales: {
    y: {
      title: {
        display: true, // 确保标题可见
        text: '初始Y轴标题', // 初始标题文本
        color: '#ffffff'
      },
      // ... 其他Y轴配置
    }
  }
};

// 假设 myChart 已经被初始化
const newYAxisLabel = '新的重量 (kg)';
myChart.options.scales.y.title.text = newYAxisLabel;

// 1. 定义图表数据 (示例数据)
const data = {
  labels: ['一月', '二月', '三月', '四月', '五月'],
  datasets: [{
    label: '销售额',
    data: [65, 59, 80, 81, 56],
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};

// 2. 定义图表选项
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',
        stepSize: 1
      }
    },
    y: {
      title: {
        display: true, // 确保Y轴标题显示
        text: '重量 (kg)', // 初始Y轴标题
        color: '#ffffff'
      },
      grid: {
        color: 'rgb(239,96,36,0.5)',
        borderColor: '#ef6024'
      },
      ticks: {
        color: '#ffffff',
        beginAtZero: true
      }
    }
  }
};

// 3. 配置图表
const config = {
  type: 'line',
  data: data,
  options: options,
};

// 4. 初始化图表
const myChart = new Chart(
  document.getElementById('myChartCanvas'), // 确保页面中有 <canvas id="myChartCanvas"></canvas>
  config
);

// 5. 动态更新 Y 轴标题的函数
function updateYAxisLabel(newLabel) {
  // 修改 Y 轴标题文本
  myChart.options.scales.y.title.text = newLabel;
  // 确保标题显示 (即使初始化已设置，再次确认也无妨)
  myChart.options.scales.y.title.display = true; 

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

// 示例调用：在某个事件或条件触发后更新标题
// 例如，3秒后更新标题
// setTimeout(() => {
//   updateYAxisLabel('新的单位 (克)');
// }, 3000);