Chart.js中坐标轴标签无法显示的问题求助

嘿，我帮你找到问题所在啦！你用的是Chart.js 2.7.2版本，这个版本里scales配置项中的xAxes和yAxes必须是数组类型，但你写成了单个对象，这就是标签不显示的核心原因——Chart.js没法正确识别你的轴配置。

错误的配置部分 #

你原来的代码里是这样写的：

"scales": {
  "xAxes": {
    "scaleLabel": {
      "display": true,
      "labelString": "Horizontal Axis"
    }
  },
  "yAxes": {
    "scaleLabel": {
      "display": true,
      "labelString": "Vertical Axis"
    }
  }
}

修正后的正确配置 #

只需要把xAxes和yAxes改成包含单个对象的数组就行：

"scales": {
  "xAxes": [{
    "scaleLabel": {
      "display": true,
      "labelString": "Horizontal Axis"
    }
  }],
  "yAxes": [{
    "scaleLabel": {
      "display": true,
      "labelString": "Vertical Axis"
    }
  }]
}

完整的修正代码 #

这里是全部改好的代码，直接用就能看到坐标轴标签正常显示了：

<script src="http://www.chartjs.org/dist/2.7.2/Chart.bundle.js"></script>
<canvas id="m-chart-562-1"></canvas>
<script type="text/javascript">
new Chart(
  document.getElementById('m-chart-562-1').getContext('2d'),
  {
    "type": "bar",
    "options": {
      "title": {
        "display": true,
        "text": "Test"
      },
      "legend": {
        "display": true,
        "position": "bottom"
      },
      "scales": {
        "xAxes": [{
          "scaleLabel": {
            "display": true,
            "labelString": "Horizontal Axis"
          }
        }],
        "yAxes": [{
          "scaleLabel": {
            "display": true,
            "labelString": "Vertical Axis"
          }
        }]
      }
    },
    "data": {
      "datasets": [{
        "label": "Number",
        "data": [10, 2, 7],
        "backgroundColor": "#7cb5ec"
      }, {
        "label": "Fatalities",
        "data": [5, 0, 1],
        "backgroundColor": "#434348"
      }],
      "labels": ["Cars", "Planes", "Boats"]
    }
  }
);
</script>

这个修改的原因是Chart.js 2.x版本开始支持多坐标轴，所以把轴的配置设计成数组结构，即使你只需要单轴，也得用数组包裹起来。改完之后X轴和Y轴的标签就能正常显示啦！

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