Reactjs Recharts由两种不同的数据类型/数据基线组成（值/百分比）

我正在做一个天气激情项目，使用React和Recharts，并试图将温度和降雨填充到同一个图表中

此处还有插图：

你可以看到我的困境。我想有雨酒吧开始从底部的X轴。但是对于这两种图表类型，值0的含义是相同的。有没有办法克服这个问题，用一些神奇的数学或者别的什么

或者让数据集具有完全不同的类型？比如用摄氏度来表示温度值，但用百分比来表示雨量，所以零雨量意味着没有巴，100%雨量意味着满巴

---

或者，如果Recharts不能做到这一点，我需要一个可以做到的图表库。

结果表明，我想要的是另一个Y轴，Recharts支持这一点。以下是使用recharts 1.8.5的工作解决方案代码：

import React from 'react';
import { ComposedChart, XAxis, YAxis, Tooltip, Legend, CartesianGrid, Bar, Line } from 'recharts'

export default function App() {

  const data = [
    { time: "00:00", temp: -5, rain: 0 },
    { time: "03:00", temp: -2, rain: 0 },
    { time: "06:00", temp: -1, rain: 0 },
    { time: "09:00", temp: 0, rain: 0 },
    { time: "12:00", temp: 2, rain: 3 },
    { time: "15:00", temp: 4, rain: 10 },
    { time: "18:00", temp: 5, rain: 3 },
    { time: "21:00", temp: 3, rain: 0 },
    { time: "00:00", temp: 0, rain: 0 },

  ]

  return (
    <div className="App">
      <ComposedChart width={730} height={250} data={data}>
        <XAxis dataKey="time" />
        <YAxis yAxisId={1} orientation="right" label={{ value: 'Rain mm', angle: -90 }} />
        <YAxis yAxisId={2} label={{ value: 'Temp', angle: -90 }} />
        <Tooltip />
        <Legend />
        <CartesianGrid stroke="#f5f5f5" />
        <Bar yAxisId={1} dataKey="rain" barSize={40} fill="#413ea0" />
        <Line yAxisId={2} type="monotone" dataKey="temp" stroke="#ff0000" />
      </ComposedChart>
    </div>
  );
}

从“React”导入React；
从“recharts”导入{ComposedChart，XAxis，YAxis，工具提示，图例，CartesianGrid，Bar，Line}
导出默认函数App（）{
常数数据=[
{时间：“00:00”，温度：-5，雨量：0}，
{时间：“03:00”，温度：-2，雨量：0}，
{时间：“06:00”，温度：-1，雨量：0}，
{时间：“09:00”，温度：0，雨量：0}，
{时间：“12:00”，温度：2，雨：3}，
{时间：“15:00”，温度：4，雨量：10}，
{时间：“18:00”，温度：5，雨量：3}，
{时间：“21:00”，温度：3，雨量：0}，
{时间：“00:00”，温度：0，雨量：0}，
]
返回(
);
}