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

const options = {
  scales: {
    x: {
      title: {
        display: true,
        text: 'Days',
        color: 'white'
      },
      grid: {
        color: 'rgb(239,96,36,0.5)',
        borderColor: '#ef6024'
      },
      ticks: {
        color: '#ffffff',
        stepSize: 50
      }
    },
    y: { // 访问Y轴配置
      title: { // 访问Y轴标题配置
        display: true, // 确保标题显示
        text: 'Weight (kg)', // 初始标题文本
        color: '#ffffff'
      },
      grid: {
        color: 'rgb(239,96,36,0.5)',
        borderColor: '#ef6024'
      },
      ticks: {
        color: '#ffffff',
        beginAtZero: true
      }
    }
  }
};

// 假设 HTML 中有一个 <canvas id="myChart"></canvas> 元素
const ctx = document.getElementById('myChart').getContext('2d');

// 初始数据
const initialData = {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
  datasets: [{
    label: 'Weekly Weight (kg)',
    data: [70, 69, 71, 70, 68, 67, 69],
    borderColor: 'rgb(239,96,36)',
    backgroundColor: 'rgba(239,96,36,0.2)',
    tension: 0.4,
    fill: false
  }]
};

// 图表配置
const config = {
  type: 'line',
  data: initialData,
  options: {
    plugins: {
      legend: {
        labels: {
          color: "white",
        }
      }
    },
    maintainAspectRatio: false,
    scales: {
      x: {
        title: {
          display: true,
          text: 'Days',
          color: 'white'
        },
        grid: {
          color: 'rgb(239,96,36,0.5)',
          borderColor: '#ef6024'
        },
        ticks: {
          color: '#ffffff',
          stepSize: 1
        }
      },
      y: {
        title: {
          display: true, // 确保标题显示
          text: 'Weight (kg)', // 初始Y轴标题
          color: '#ffffff'
        },
        grid: {
          color: 'rgb(239,96,36,0.5)',
          borderColor: '#ef6024'
        },
        ticks: {
          color: '#ffffff',
          beginAtZero: true
        }
      }
    }
  },
};

// 初始化图表
const myChart = new Chart(ctx, config);

// 动态修改Y轴标题的函数
function updateYAxisLabel(newLabel, newUnit) {
  // 1. 访问并设置新的标题文本
  myChart.options.scales.y.title.text = `${newLabel} (${newUnit})`;

  // 2. 确保标题显示 (如果之前设置为false，这里可以重新启用)
  myChart.options.scales.y.title.display = true;

  // 3. 更新图表以应用更改
  myChart.update();
  console.log(`Y轴标题已更新为: ${newLabel} (${newUnit})`);
}

// 模拟动态更新Y轴标题
setTimeout(() => {
  updateYAxisLabel('Temperature', '°C');
  // 也可以同时更新数据和数据集标签
  myChart.data.datasets[0].data = [20, 22, 21, 23, 20, 19, 21];
  myChart.data.datasets[0].label = 'Weekly Temperature (°C)';
  myChart.update();
}, 2000);

setTimeout(() => {
  updateYAxisLabel('Humidity', '%');
  myChart.data.datasets[0].data = [60, 65, 62, 68, 70, 65, 63];
  myChart.data.datasets[0].label = 'Weekly Humidity (%)';
  myChart.update();
}, 4000);