在 chartjs 中设置最小值和最大值不起作用

Question

我有这张图，但是设置最小值和最大值没有用。 y 轴仍然具有与数据相同的最高值。我该如何解决这个问题？

这是 codesandbox link: https://codesandbox.io/s/vibrant-dewdney-t01id?file=/src/App.js:0-1338

这些是代码：

import "./styles.css";
import { Bar } from "react-chartjs-2";

export default function App() {
  return (
    <div className="App">
      <Bar
        data={{
          labels: ["F", "H", "N", "M"],
          datasets: [
            {
              label: "1st Item",
              data: [10, 20, 50, 30],
              backgroundColor: ["rgba(255, 99, 132, 0.2)"],
              borderColor: ["rgba(255, 99, 132, 1)"],
              borderWidth: 1
            },
            {
              label: "2nd Item",
              data: [20, 10, 50, 60],
              backgroundColor: ["rgba(75, 192, 192, 0.2)"],
              borderColor: ["rgba(255, 159, 64, 1)"],
              borderWidth: 1
            }
          ]
        }}
        height={400}
        width={600}
        options={{
          maintainAspectRatio: false,
          title: {
            display: true,
            text: "vaccine",
            fontSize: 20
          },
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true,
                  min: 0,
                  max: 100,
                  stepSize: 20
                }
              }
            ]
          },
          legend: {
            labels: {
              fontSize: 25
            }
          }
        }}
      />
    </div>
  );
}

Answer 1

您的代码符合 Chart.js 2.x 的要求，但由于您使用的是 Chart.js 3.5.1，scales 需要进行如下更改。

scales: {
  y: {
    min: 0,
    max: 100,
    ticks: {
      stepSize: 20
    }
  }
},

在 chartjs 中设置最小值和最大值不起作用

Setting up min and max in chartjs did not work

javascript

reactjs

charts

chart.js

react-chartjs