微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

react-google-charts react,如何使用grapql中的json?

如何解决react-google-charts react,如何使用grapql中的json?

我正在尝试使用 graphql 和 google-react-charts 打印价格图表,我可以成功检索数据,但无法处理它。我不知道如何在 google-react-charts 中使用来自 graphql 的 json 响应。到目前为止我找到的最佳答案是 this

代码

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
        },"quotePrice": 1.1939250721714323
      },...
...
...

错误

Uncaught (in promise) Error: Row 1 has 10 columns,but must have 2

问题是我如何仅使用时间戳和报价单以及打印图表来迭代 json。

  data={[ 
    ["Date",)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。