Пересчитывает ComposedChart двух разных типов данных / базовых данных (значение / процент) - PullRequest
Новая
       38

Пересчитывает ComposedChart двух разных типов данных / базовых данных (значение / процент)

0 голосов
/ 26 февраля 2020

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

Illustration

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

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

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

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

1 Ответ

0 голосов
/ 26 февраля 2020

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

Illustration

...