0

我正在尝试使用 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 ],)
4

0 回答 0