Recharts ComposedChart для двух разных типов данных/базовых показателей (значение/процент)

Я занимаюсь проектом, посвященным погоде, используя React и Recharts, и пытаюсь втиснуть температуру и дождь в один и тот же график.

Иллюстрация

Иллюстрация также здесь: https://imgur.com/OayH9cG

Вы можете видеть мою дилемму. Я хотел бы, чтобы стержни дождя начинались с нижней оси X. Но нулевое значение означает одно и то же для обоих типов диаграмм. Есть ли способ преодолеть это, с помощью какой-то магической математики или чего-то в этом роде?

Или иметь наборы данных совершенно разных типов? Например, использовать градусы Цельсия для значений температуры, но процент дождя, так что отсутствие дождя означает отсутствие полосы, а 100% дождя означает полную полосу?

Или, если Recharts не может этого сделать, я за библиотеку диаграмм, которая может.


reactjs charts recharts weather
person T-101    schedule 26.02.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Оказывается, я искал еще одну ось 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>
  );
}

Иллюстрация

person T-101    schedule 26.02.2020