首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在chartjs中设置最小和最大值不起作用

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

Stack Overflow用户
提问于 2021-08-31 03:50:02
回答 1查看 265关注 0票数 2

我有这个图,但是设置最小和最大值不起作用。Y轴仍然具有与数据上相同的最高值。我该如何解决这个问题呢?

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

代码如下:

代码语言:javascript
运行
复制
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>
  );
}
EN

Stack Overflow用户

回答已采纳

发布于 2021-08-31 04:08:43

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

代码语言:javascript
运行
复制
scales: {
  y: {
    min: 0,
    max: 100,
    ticks: {
      stepSize: 20
    }
  }
},
票数 1
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68992642

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档