Question

我目前正在尝试将the basic area chart实现到我的代码中，但我意识到我不知道如何将代码添加到代码中。我克隆了AreaChart组件并集成到我的视图中，添加为<AreaChart data={values} ratio={10} width={10} type={'svg'}/>，但在解析数据时，没有关于如何解析数据，数据模板或其他任何内容的书面说明，只是一个错误。文档也不好

是否有关于如何将数据提供给图表的示例？

我试图解析以下json：

"stock": [
  {
    "date": 56116,
    "price": 0.431,
    "accuracy": 0.4361,
    "high": 4.1515,
    "low": 1507.9235,
    "open": 1312.0051,
    "close": 1246.5826
  },
  {
    "date": 93492,
    "price": 0.1717,
    "accuracy": 0.1489,
    "high": 1373.5059,
    "low": 974.1351,
    "open": 1412.5995,
    "close": 1447.5179
  },
  {
    "date": 48833,
    "price": 0.5229,
    "accuracy": 0.9701,
    "high": 466.1322,
    "low": 1673.346,
    "open": 1295.6486,
    "close": 67.016
  }]

格式正确还是格式不同？

谢谢！

Answer 1

数据格式为tsv。

Demo link

tsv sample file used in demo

Answer 2

没有必要将您的输入重新格式化为tsv。我发现只需要更改日期的格式即可。

我的原始输入数据导致了相同的输入错误，并且采用以下格式：

{
"date": "2018-06-22",
"open": 74.5,
"high": 74.54,
"low": 74.22,
"close": 74.31,
"volume": 553642
}

我用以下代码重新设置了格式：

const IEX_BASE = 'https://api.iextrading.com/1.0/'
const symbol = this.props.cellObject.symbol
const filter = '?filter=date,open,high,low,close,volume'
axios
  .get(`${IEX_BASE}stock/${symbol}/chart/1y${filter}`)
  .then((res) => {
    let values = res.data
    let data = values.map((obj) => {
      let date = obj.date + 'T05:00:00.000Z'
      obj.date = new Date(date)
      return obj
    })
    this.setState({ data })
  })

新数据无误地传递到反应表。新格式如下：

{
"date": "2018-06-22T05:00:00.000Z",
"open": 74.5,
"high": 74.54,
"low": 74.22,
"close": 74.31,
"volume": 553642
}

我不熟悉您的日期格式，例如“ 56116”，但是请尝试以下操作：

obj.date = new Date(date)

Answer 3

道具数据需要一个数组，

const parsed_date_your_json=/* preprocess date string to a date object */;
<AreaChart data={your_json['stock']} ratio={10} width={10} type={'svg'}/>

如何将数据加载到react-stockcharts？

3 个答案: