如何使用一个明显大于其他的 dataKey 来规范 Recharts ComposedChart

如何解决如何使用一个明显大于其他的 dataKey 来规范 Recharts ComposedChart

我想知道是否可以为多个 rechart 实例（比如 Area 和 Bar）“规范化”数据集值。

问题是我的数据集是订单收入和金额的月度统计图表。并且一个值明显大于另一个。

示例数据看起来：

{
  income: 5050,amount: 3,},{
  income: 8600,amount: 5,

组件（简化）

            <ComposedChart data={daysData}>
              <Area dataKey="income" />
              <Bar dataKey="amount"  />
            </ComposedChart>

这导致条形图在图表上几乎不可见。 尽管原始值很低，但我希望条形图是例如容器高度的一半。

我可以手动将 amount 乘以 1000 并以某种方式转换工具提示值，但这不是一个稳定的解决方案，因为数量可能以数十万甚至数百万计

解决方法

作为临时解决方案，我编写了简单的规范化函数。它有效，但似乎不对。

我可以使用本机 recharts 参数在功能上做什么类似的事情吗？

  const daysDataNormalized = useMemo(() => {
    const greatestIncome = daysData.reduce((acc,x) => (acc.income > x.income ? acc : x)).income;
    const greatestAmount = daysData.reduce((acc,x) => (acc.amount > x.amount ? acc : x)).amount;

    const multiplier = greatestIncome / greatestAmount / 2;

    return daysData.map((stat) => ({
      name: stat.name,income: stat.income,amount: stat.amount * multiplier,amountTooltip: stat.amount,}));
  },[daysData]);

  const TooltipFormater = (value,name,props) => {
    if (name === 'amount') {
      return value;
    }
    if (name === 'income') {
      return props.payload.amountTooltip;
    }
  };