使用 react-chartjs-2 制作固定的 y 轴刻度

Question

我想用 Chart.js 和 React 创建一个图表，它有一个持久的 yAxis，范围从 -15 到 15，stepSize 为 5。作为示例，我复制了可在此处找到的动态条形图： https://reactchartjs.github.io/react-chartjs-2/#/dynamic-bar

charjs.org 的文档在此处提到了轴的最小和最大属性： https://www.chartjs.org/docs/3.2.0/samples/scales/linear-min-max.html 但 react-chartjs-2 似乎忽略了这些值。我试过了：

旧命名：scales.yAxis
新命名：scales.y
将“scaleOverride : true”添加到 options.scales 和选项。scales.y
在“刻度”内
在“刻度线”之外
正在删除配置中的所有内容。scales.y 但最小值、最大值和步长具有新旧命名

我现在的App.js：

import React, { useEffect, useState } from 'react';
import { Bar } from 'react-chartjs-2';

const rand = () => Math.round(Math.random() * 20 - 10);

const genData = () => ({
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [
    {
      label: 'Scale',
      data: [rand(), rand(), rand(), rand(), rand(), rand()],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)',
      ],
      borderWidth: 1,
    },
  ],
});

const options = {
  scales: {
    scaleOverride : true,
    y: [
      {
        type: "time",
        ticks: {
          min: 0,
          max: 150,
          stepSize: 20
        },
        
      },
    ],
    x: [
      {
        type: "Amp",
        ticks: {
        },
        
      },
    ],
  },
};

function App() {
  const [data, setData] = useState(genData());

  useEffect(() => {
    const interval = setInterval(() => setData(genData()), 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <>
      <Bar className="Linechart" data={data} options={options} />
    </>
  );
};

export default App;

有人可以向我解释一下将 y 轴设置为固定范围的正确方法是什么吗？提前致谢。

Answer 1

这是一个简单的语法错误。使用此配置有效：

const options = {
  scales: {
    y:
      {
        min: -15,
        max: 15,
        stepSize: 5,
      },
    x:
      {
        
      },
  },
};

Answer 2

上面接受的答案似乎对我不起作用。我找到了这个解决方案，它可以很好地使用 react-chartjs-2 库自定义条形图 y-axis 上的比例。

const chartOptions = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: false,
        min: 0,
        stepSize: 2,
        callback: function(value) {
          return `${value}`
        }
      }
    }]
  }
}

像这样在您的条形图中使用此对象： <Bar data={data} options={chartOptions} />

使用 react-chartjs-2 制作固定的 y 轴刻度

Making fixed y-Axis scales with react-chartjs-2

reactjs

react-chartjs-2