Recharts ComposedChart 两种不同的数据类型/数据基线（值/百分比）答案

【问题标题】：Recharts ComposedChart two different data types / data baselines (value / percentage)Recharts ComposedChart 两种不同的数据类型/数据基线（值/百分比）
【发布时间】：2020-06-10 15:39:48
【问题描述】：

我正在使用 React 和 Recharts 做一个天气激情项目，并试图将温度和雨水塞进同一张图表。

插图也在这里：https://imgur.com/OayH9cG

你可以看到我的困境。我想让雨条从底部 X 轴开始。但是对于两种图表类型，零值意味着相同的事情。有什么办法可以克服这个问题，用一些神奇的数学什么的？

或者让数据集是完全不同的类型？就像使用摄氏度作为温度值，但使用百分比作为降雨量，这样零雨意味着没有条，而 100% 的雨意味着满条？

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

【问题讨论】：

标签： reactjs charts weather recharts

【解决方案1】：

原来我正在寻找的是另一个 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>
  );
}

【讨论】：