Question

我正在使用Recharts库来绘制一些股票市场数据。但是，简单的折线图需要非常严格的数据结构，如此

{name: 'Page A', uv: 4000, pv: 2400, amt: 2400}

我的数据看起来像这样

Object
AAPL:Array[4]
0:Object
adjClose:53.509768
close:411.23
date:"2012-01-02T18:30:00.000Z"
high:412.499989
low:408.999989
open:409.399998
symbol:"AAPL"
volume:75555200
__proto__:Object
1:Object
2:Object
3:Object
length:4
__proto__:Array[0]
GOOGL:Array[4]
TSLA:Array[4]

其中特定代码的每个对象代表该代码的一天。看起来我需要从那个到这样的数据结构

data=[
    {date: 'Jan 12, 2012', AAPL: {open: 12, close: 15}, TSLA: {open: 15, close: 21}, GOOGL: {open: 125, close: 21}}, 
    {date: 'Jan 13, 2012', AAPL: {open: 15, close: 12}, TSLA: {open: 21, close: 155}, GOOGL: {open: 21, close: 25}}
    ...
    ...
    ...
];

我仍然不完全确定Recharts会以这种方式按照我想要的方式绘制数据，但它似乎是最可能的选择。

为了澄清，我想要绘制的方式是同一图表元素上每个股票代码的单独折线图

Answer 1

您可以遍历每个符号，然后使用简单的循环构建数据对象，并在每个符号中使用子循环。这将假设每个符号包含相同日期的相同数组。

// result object
let result = [];

// get the ticker list from the object keys
const tickers = Object.keys(yourDataObject);

// get number of days for first ticker by looking at it's array length
const days = yourDataObject[tickers[0]].length;

// iterate through the days to parse the data
for (let i = 0; i < days; i++) {
  // initiate row data with date of the first symbol
  let rowData = {
    date: new Date(yourDataObject[tickers[0]][i]).toLocaleDateString(),
  }
  // iterate through the tickers for that day
  symbols.forEach(symbol => {
    const tickerDayData = yourDataObject[symbol][i];
    rowData[ticker] = {
      open: ~~tickerDayData.open, // using ~~ to get the int value, you could round if you'd prefer
      close: ~~tickerDayData.close,
    };
  });
  // add to main result array
  result.push(rowData);
}

如果你提供了实际数据，我们可以在控制台中运行它进行测试。

如何将对象中的库存数据解析为数组

1 个答案: