Chart.js - 2 不显示轴标签答案

【问题标题】：Chart.js - 2 does not display Axes labelsChart.js - 2 不显示轴标签
【发布时间】：2021-04-13 08:12:28
【问题描述】：

我正在尝试使用 vue-chartjs 和 Chart.js (2.7.1) 绘制折线图。图表已显示，但没有 xAxes 和 yAxes 标签。

这是我的选项对象：

title: {
    display: true,
    text: 'Title',
},
responsive: true,
maintainAspectRatio: false,
elements: {
    line: {
        fill: false
    }        
},
scales: {
    xAxes: {
        scaleLabel: {
            display: true,
            labelString: 'LabelX',
        }
    },
    yAxes: {
        scaleLabel: {
            display: true,
            labelString: 'LabelY',
        }
    },
}

我认为 scales.xAxes.scaleLabel 不起作用。

【问题讨论】：

标签： javascript chart.js vue-chartjs

【解决方案1】：

您正在尝试将 V3 语法与 V2 一起使用，但这是行不通的。你必须这样写：

scales:{
  xAxes: [
    {
       scaleLabel: {
         display: true,
          labelString: 'text'
       }
     }
  ],
  yAxes: [
    {
       scaleLabel: {
         display: true,
          labelString: 'text'
       }
     }
  ]
 }

【讨论】：

【解决方案2】：

在Chartjs 2.x.x 版本中，您必须在数组而不是对象中指定缩放选项。

这样试试

 xAxes: [{
  scaleLabel: {
        display: true,
        labelString: 'LabelX',
  },
  gridLines: {
    display: true
  }
}]

【讨论】：