Chart.min.js v3.0.0无法添加X、Y轴标题问题求助

你的代码用的是Chart.js v2版本的轴配置语法，但如果当前使用的是v3及以上版本，这种写法会失效——v3对配置结构做了重大重构，废弃了xAxes/yAxes数组写法，同时scaleLabel也被替换为title配置项。

修正后的代码如下：

var ctx0 = document.getElementById('myChart0').getContext('2d');
const plotData0 = {
   labels: [],
   datasets: [
      {
         data: [],
         borderColor: 'red',
         borderWidth: 2,
         tension: 0,
         fill: false
      }],
};

var myChart0 = new Chart(ctx0, {
   type: 'line',
   data: plotData0,
   options: {
      responsive: true,
      legend: {
         position: 'bottom'
      },
      scales: {
         // 替换原xAxes数组为单个x对象
         x: {
            display: true,
            title: {
               display: true,
               text: 'X-Axis Label' // v3+用text替代原labelString
            }
         },
         // 替换原yAxes数组为单个y对象
         y: {
            display: true,
            title: {
               display: true,
               text: 'Y-Axis Label'
            }
         }
      }
   }
});

关键改动说明 #

• 移除xAxes/yAxes数组，直接在scales下定义x/y单个对象（默认单轴场景）
• 将scaleLabel替换为title配置，用text属性设置轴标题文本（替代原labelString）

如果确认使用的是Chart.js v2版本，原代码逻辑本身没问题，可排查以下点：

• 检查Chart.js是否正确加载（浏览器控制台无加载错误）
• 确保图表容器myChart0有足够的尺寸（避免标题被容器裁剪）
• 确认没有其他自定义配置覆盖了轴标题的显示

内容的提问来源于stack exchange，提问作者ronkrem