React中Chart.js堆叠轴数据超出最大值，如何实现截断隐藏？

方法一：通过自定义插件视觉截断超出部分 #

这种方法无需修改原始数据，仅在图表绘制阶段设置裁剪区域，隐藏超出y轴最大值的部分，适合需要保留原始数据但视觉上截断的场景。

编写截断插件 #

const truncateOverflowPlugin = {
  beforeDraw: (chart) => {
    const yAxis = chart.scales.y;
    // 仅当y轴设置了max值时生效
    if (yAxis.options.max !== undefined) {
      const maxPixel = yAxis.getPixelForValue(yAxis.options.max);
      // 保存当前绘图上下文状态
      chart.ctx.save();
      // 创建裁剪区域：仅绘制max值对应像素以下的区域
      chart.ctx.rect(0, maxPixel, chart.width, chart.height - maxPixel);
      chart.ctx.clip();
    }
  },
  afterDraw: (chart) => {
    const yAxis = chart.scales.y;
    if (yAxis.options.max !== undefined) {
      // 恢复绘图上下文状态
      chart.ctx.restore();
    }
  }
};

在React组件中使用插件 #

以react-chartjs-2的柱状图为例：

import { Bar } from 'react-chartjs-2';
import { Chart as ChartJS, registerables } from 'chart.js';

// 注册ChartJS所需组件
ChartJS.register(...registerables);

// 复用上述截断插件

const StackedChart = () => {
  const chartData = {
    labels: ['一月', '二月', '三月'],
    datasets: [
      {
        label: '数据集1',
        data: [60, 80, 120],
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
        stack: '分组1'
      },
      {
        label: '数据集2',
        data: [50, 40, 70],
        backgroundColor: 'rgba(54, 162, 235, 0.5)',
        stack: '分组1'
      }
    ]
  };

  const chartOptions = {
    scales: {
      y: {
        stacked: true,
        max: 100, // 设定y轴最大值
        min: 0
      },
      x: {
        stacked: true
      }
    }
  };

  return (
    <Bar
      data={chartData}
      options={chartOptions}
      plugins={[truncateOverflowPlugin]}
    />
  );
};

export default StackedChart;

方法二：预处理数据确保总和不超过最大值 #

如果需要让数据的堆叠总和严格不超过设定的max值（而非仅视觉截断），可以在传入ChartJS前预处理数据，按比例缩减超出部分。

数据处理函数 #

const adjustStackedData = (datasets, maxValue) => {
  return datasets.map((ds) => {
    const newData = ds.data.map((value, dataIdx) => {
      // 计算当前数据点的堆叠总和
      const total = datasets.reduce((sum, currentDs) => sum + currentDs.data[dataIdx], 0);
      // 若总和超出max，按比例缩减当前数据集的值
      return total > maxValue ? (value * maxValue) / total : value;
    });
    return { ...ds, data: newData };
  });
};

在组件中使用处理后的数据 #

// ... 其他导入和配置
const StackedChart = () => {
  const originalDatasets = [
    {
      label: '数据集1',
      data: [60, 80, 120],
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
      stack: '分组1'
    },
    {
      label: '数据集2',
      data: [50, 40, 70],
      backgroundColor: 'rgba(54, 162, 235, 0.5)',
      stack: '分组1'
    }
  ];

  // 处理数据，确保堆叠总和不超过100
  const processedDatasets = adjustStackedData(originalDatasets, 100);

  const chartData = {
    labels: ['一月', '二月', '三月'],
    datasets: processedDatasets
  };

  const chartOptions = {
    scales: {
      y: {
        stacked: true,
        max: 100,
        min: 0
      },
      x: {
        stacked: true
      }
    }
  };

  return <Bar data={chartData} options={chartOptions} />;
};

两种方法对比 #

• 插件截断：保留原始数据，仅视觉隐藏超出部分，适合需要原始数据用于其他逻辑的场景。
• 数据预处理：修改数据使得堆叠总和不超过max，图表显示的是调整后的数据，适合需要数据严格符合轴范围的场景。

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