javascript - 如何将对象中的股票数据解析为数组

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);
}

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