我正在尝试使用 graphql 和 google-react-charts 打印价格图表,我可以成功检索数据但我无法处理它。我不知道如何在 google-react-charts 中使用来自 graphql 的 json 响应。到目前为止我找到的最佳答案是这个
代码
function ExchangeRates() {
const { loading, error, data } = useQuery(gql`
{
ethereum(network: bsc) {
dexTrades(
baseCurrency: {is: "address"}
quoteCurrency: {is: "address"}
options: {desc: ["block.height", "transaction.index"], limit: 10}
) {
block {
height
timestamp {
time(format: "%Y-%m-%d %H:%M:%S")
}
}
transaction {
index
}
baseCurrency {
symbol
}
quoteCurrency {
symbol
}
quotePrice
}
}
}
`);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return (
<Chart
width='500px'
height='300px'
chartType="AreaChart"
loader={<div>Loading Chart</div>}
data={[
["Date","Price"],
data.ethereum.dexTrades.map(d => [ d.block.timestamp.time, d.quotePrice ],)
]}
options={{
height: 300,
legend: { position: 'top', maxLines: 3 },
vAxis: {
minValue: 0,
},
}}
/>
)}
来自 GraphQL 的 JSON 响应
"ethereum": {
"dexTrades": [
{
"block": {
"height": 6161087,
"timestamp": {
"time": "2021-03-31 13:14:08"
}
},
"transaction": {
"index": 63
},
"baseCurrency": {
"symbol": ""
},
"quoteCurrency": {
"symbol": ""
},
"quotePrice": 1.1840567672583981
},
{
"block": {
"height": 6160908,
"timestamp": {
"time": "2021-03-31 13:04:17"
}
},
"transaction": {
"index": 102
},
"baseCurrency": {
"symbol": ""
},
"quoteCurrency": {
"symbol": ""
},
"quotePrice": 1.1939250721714323
},
...
...
...
错误
Uncaught (in promise) Error: Row 1 has 10 columns, but must have 2
问题是我如何只使用时间戳和报价价格和打印图表来迭代 json。
data={[
["Date","Price"],
data.ethereum.dexTrades.map(d => [ d.block.timestamp.time, d.quotePrice ],)