如何在react-chartjs-2中获得动态步长 ex1 结果图片ex2 结果图像

如何解决如何在react-chartjs-2中获得动态步长 ex1 结果图片ex2 结果图像

我正在使用 Chart.js 在打字稿中绘制图形。 我想获得一个动态权重并带来一个最小值和一个最大值。并且 maxTicksLimit 为 5，无论输入什么数据，我都希望保留 5 Ticks。 体重小数点取小数点后第一位。

例如）50.3

我想尽可能地展示 minimum 和 maximum 之间的区别。

请帮帮我！！！

ex1) 最大权重：74.5，最小权重：71

结果
Y轴最大权重：76，Y轴最小权重：71

ex1 结果图片

enter image description here

ex2) 最大权重：76.9，最小权重：62

结果
Y轴最大权重：76，Y轴最小权重：61

ex2 结果图像

enter image description here

解决方法

我通过以下方式解决了这个问题。

chart.js 中有 afterBuildTicks 的回调函数

※ chart.js documents link。

可以自定义刻度。

//... middle code skip
const getChartMaxAndMin = (
    maxValue,minValue
): { max: number; min: number } => {
    // Convert all decimal places to integers
    let max = Math.ceil(maxValue);
    let min = Math.floor(minValue);
    // a multiple of 5
    const MULTIPLES = 5;
    const DIVIDED_REMAINING_VALUE_LIMIT = 3;
    // Maximum to Minimum difference
    const diff = max - min;
    const diffDividedRemainingValue = diff % MULTIPLES;

    const remainingValue =
        MULTIPLES *
            (diffDividedRemainingValue > DIVIDED_REMAINING_VALUE_LIMIT
                ? Math.floor(diff / MULTIPLES) + 2
                : Math.floor(diff / MULTIPLES) + 1) -
        diff;

    if (remainingValue % 2 !== 0) {
        max = max + Math.floor(remainingValue / 2) * 2;
        min = min - Math.floor(remainingValue % 2);
        return { max,min };
    }

    max = max + remainingValue / 2;
    min = min - remainingValue / 2;
    return { max,min };
};

const customizedAxesTicks = (axis) => {
    const EQUAL_PARTS = 5; // set 5 parts
    const max = axis.max;
    const min = axis.min;
    const steps = (max - min) / EQUAL_PARTS;
    const ticks = [];

    for (let i = min; i <= max; i += steps) {
        ticks.push(i);
    }
    axis.ticks = ticks;
    return;
};

const {max,min} = getChartMaxAndMin(68,57);

const chartOptions = {
  //... code skip
  scales: {
    yAxes: [
      {
        //... code skip
        ticks: {
          max: max,min: min
  },afterBuildTicks: customizedAxesTicks,//... code skip
};

如果您能告诉我是否有更好的方法，我将不胜感激?