ReactJS堆叠柱状图Y轴数值动态适配数据的实现咨询

Absolutely, you can achieve this dynamic Y-axis adjustment! Here's how to do it step by step:

Step 1: Calculate the Maximum Value from Your Data #

First, we need to extract the highest value across all datasets in your chart data. This will let us determine what the Y-axis max should be.

Add this method to your class component (or define it as a utility function if using functional components):

calculateMaxYValue = (data) => {
  // Fallback to 500 if there's no data to avoid errors
  if (!data?.datasets?.length) return 500;

  let highestValue = 0;
  // Iterate through each dataset to find the maximum value
  data.datasets.forEach(dataset => {
    if (dataset.data.length) {
      const datasetMax = Math.max(...dataset.data);
      highestValue = Math.max(highestValue, datasetMax);
    }
  });

  // Apply your dynamic condition
  if (highestValue < 100) {
    // Round up to the nearest 10 (matches your 75 → 80 example)
    return Math.ceil(highestValue / 10) * 10;
  } else {
    // For values 100 or above, adjust logic to fit your needs (e.g., round to nearest 50)
    return Math.ceil(highestValue / 50) * 50;
    // Alternative: Add a 10% buffer for better visualization: return highestValue + (highestValue * 0.1);
  }
};

Step 2: Use the Calculated Max in Your Chart Options #

Now, compute the dynamic max value right before rendering your Bar component, and replace the fixed max: 500 with this value in both Y-axis configurations:

render() {
  const dynamicYMax = this.calculateMaxYValue(this.state.data);

  return (
    <Bar
      data={this.state.data}
      width={400}
      height='150'
      options={{
        tooltips: { mode: 'point', intersect: false },
        responsive: true,
        scales: {
          xAxes: [{ stacked: true }],
          yAxes: [
            {
              stacked: false,
              ticks: { beginAtZero: true, min: 0, max: dynamicYMax }
            },
            {
              id: "bar-stacked",
              stacked: true,
              display: false,
              ticks: { beginAtZero: true, min: 0, max: dynamicYMax },
              type: 'linear'
            }
          ]
        }
      }}
    />
  );
}

Key Notes: #

• Edge Cases: The fallback to 500 ensures your chart doesn't break if there's no data or empty datasets.
• Customization: You can tweak the logic for values above 100 to fit your needs—whether that's rounding to a specific increment, adding a percentage buffer, or using the exact highest value.
• Functional Components: If you're using hooks, compute dynamicYMax inside your component (or with useMemo for performance if data changes frequently) instead of a class method.

This will automatically adjust your Y-axis max based on the highest value in your data: when it's below 100, it'll round up to the nearest 10 (like 75 → 80), and for higher values, it'll use a scaled, appropriate upper limit.

内容的提问来源于stack exchange，提问作者Sandhya