reactjs - react-chartjs-2 保持 x 轴始终为 0% 到 100%

Question

我正在尝试创建一个react-chartjs-2条形图。

我希望将x轴始终保持在0%到100%。

现在图表仅显示 x 轴的最大百分比(如果 80% 是 x 值，则 x 轴最大值设置为 80)

scales: {
  x: {
    ticks: {
      color: "white",
      beginAtZero: true,
      max: 100%,
    },
    grid: {
      display: false, // Hide x grid
    },
  },
  y: {
    ticks: {
      color: "white",
    },
    grid: {
      display: false, // Hide y grid
    },
  },
},

Answer 1

查看docs for the Chart component options他们指向Chart.js docs其中最大比例是在 scale 属性下设置的，您可以将其放在 ticks 属性中，尝试:

...
  x: {
    ticks: {
      color: "white",
      beginAtZero: true,
    },
    grid: {
      display: false, // Hide x grid
    },
    max: 100,
  },
...