Recharts如何显示多个对象数组?
How to display multiple arrays of objects in Recharts?
如何在 Recharts 中显示两个对象数组?
我想在一行中显示 data_Chart 并在不同的行元素中显示来自订阅的响应...
如何实现?
Response from Subscription in Grapqhl
我已经试过了,没有成功,谢谢你的帮助!
我的代码:
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;
像这样:
在recharts中,可以添加多个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,....]
或其他...
如何在 Recharts 中显示两个对象数组?
我想在一行中显示 data_Chart 并在不同的行元素中显示来自订阅的响应...
如何实现?
Response from Subscription in Grapqhl
我已经试过了,没有成功,谢谢你的帮助!
我的代码:
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;
像这样:
在recharts中,可以添加多个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,....]
或其他...