Как отобразить несколько массивов объектов в Recharts? - PullRequest
Новая
       8

Как отобразить несколько массивов объектов в Recharts?

0 голосов
/ 25 января 2020

Как я могу отобразить два массива объектов в Recharts?

Я хочу отобразить data_Chart в одной строке, а ответ от подписки - в другом элементе строки ...

Как этого достичь?

Ответ от подписки в Grapqhl

enter image description here

Я пытался безуспешно, спасибо за помощь !

Мой код: 

import React, { Fragment, useState } from 'react';
import { useSubscription } from '@apollo/react-hooks';
import Box from '@material-ui/core/Box';
import { CRYPTO_ADDED } from '../../subscriptions';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data_Chart = [
  { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
  { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
  { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
  { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
  { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
  { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
];

const Dashboard = () => {

  const [topCrypto, setTopCrypto] = useState([]);
  useSubscription(CRYPTO_ADDED, {
    onSubscriptionData: ({subscriptionData}) => {
      setTopCrypto(topCrypto.concat(subscriptionData.data.cryptoAdded));
      console.log('topCrypto',topCrypto)
    }
  });


  let currVal = '';
  Object.keys(topCrypto).map((obj, indx) => {
    currVal = topCrypto[obj].PRICE;

  });

  return (
    <Fragment>
      <Box color="text.primary">
        <h2 className="m-2"> BTC price </h2>
          <h2>$ {currVal} </h2>

      </Box>
      <LineChart width={1100} height={685} data={topCrypto} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="LASTUPDATE" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line
          type="monotone"
          label="LASTUPDATE"
          dataKey="PRICE"
          stroke="#8884d8"
          activeDot={{ r: 8 }}
          strokeDasharray="5 5"
        />
      </LineChart>
    </Fragment>
  );
};

export default Dashboard;

Примерно так: enter image description here

1 Ответ

1 голос
/ 27 января 2020

В пополнениях можно добавить несколько line с разными dataKey

<LineChart
        width={400}
        height={300}
        data={sample}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="LASTUPDATE" />
        <YAxis  />
        <Tooltip />
        <Legend />
        <Line //first line
          type="monotone"
          dataKey="PRICE1"
          stroke="#ff84d8"
          activeDot={{ r: 8 }}
          strokeDasharray="5 5"
        />
        <Line //second line
          type="monotone"
          dataKey="PRICE2"
          stroke="#8884d8"
          activeDot={{ r: 8 }}
          strokeDasharray="5 5"
        />
      </LineChart>

временными примерами кодов и ящиком


Вам необходимо определить и определить форму сопоставимых данных
один из вариантов может быть таким: 

[  {PRICE1: 8310.45,PRICE2: 7800.45},{PRICE1: 8302.45,PRICE2: 7050.45},....]

другой вариант может быть с двумя источниками данных 

 PRICE1=  [ 8310.45,8302.45,....]
 PRICE2=  [7800.457050.45,....]

или с чем-то еще. ..

...