为什么 chart.js 中不显示主轴标题和轴标题

Question

我有以下代码可以用 chart.js 制作图表，但主轴和轴标题不起作用。此外，我已将图例放在底部但不起作用。谁能告诉我为什么它不起作用？

let dataSize = 30;
let readings = new Array(dataSize);

const data = {
  // X axis labels
  labels: new Array(dataSize),
  datasets: [{
    //label: 'My Input',  // chart label
    data: readings,         // the data to chart
    //borderColor: '#272323', // line color (lavender)
    backgroundColor: 'rgba(123, 83, 252, 80)',
    borderColor: "rgba(255, 0, 0,1)",
    borderWidth: 1.2,
    pointBorderColor: "rgba(255, 0, 0, 1)",
    pointRadius: 0.2         // point size
  }]
};

const config = {
  type: 'line',         // type of chart
  data: data,           // the data
  options: {
    animation: false,   // remove animation to speed drawing up
    responsive: true,
    maintainAspectRatio: false,
    title: {
      display: true,
      text: 'Tarrif'
    },
    legend:{
      position: 'bottom'
    },
    scales: {           // axis ranges:
      y: {
        //type: 'linear',
        scaleLabel: {
        display: true,
        labelString: 'X axis Title'
      },
        min: 0,
        max: 260,
        gridLines: {
        display: true,
        drawBorder: false //hide the chart edge line
      }
      },
      
      x:[{
          gridLines: {
          display: false
          },
           scaleLabel: {
        display: true,
        labelString: 'X axis Title'
          },
          min:0
      }]
    }
  }
};

下面是我的图表截图：

我听从了这里的建议：

谢谢

Answer 1

首先不要为你的X尺度使用数组，所有的尺度都需要定义为对象。其次，您将选项放在了错误的部分，它必须像这样在 title 命名空间中配置：

scales: {
  y: {
    title: {
      display: true,
      text: 'yTitle'
    }
  },
 x: {
    title: {
      display: true,
      text: 'xTitle'
    }
  }
}

为什么 chart.js 中不显示主轴标题和轴标题

why the main and axis title does not show in chart.js

chart.js