在React.js中可視化Google分析數據，編輯json

Question

我從谷歌分析中提取數據以顯示在用戶儀表板上。 這是我在React中的第一個可視化項目，我決定使用recharts進行虛擬化。 但是，我想重新格式化一些谷歌分析數據，使其看起來很像日期。

我正在努力編寫一個通過我的數據陣列的函數，並將數據201903重新格式化為例如03,2019（或甚至更好的March，2019）。 我只需要一個可以做到這一點的功能。 但是，我沒有從數組中提取這類數據的經驗。

這是我的數據：

[ [ '201811', '1', 'DailyPrep', '2' ],
  [ '201812', '1', 'DailyPrep', '64' ],
  [ '201901', '1', 'DailyPrep', '220' ],
  [ '201902', '1', 'DailyPrep', '755' ],
  [ '201903', '1', 'DailyPrep', '8534' ],
  [ '201904', '1', 'DailyPrep', '4705' ],
  [ '201905', '1', 'DailyPrep', '3667' ] ]

我正在尋找的函數的一個例子是：

Const FormatX = () => {
   //year = the first four digits of the first data item in each array
   //month = the last two digits of the first data item in each array
   //monthyr = month + ', ' + year;
   //return monthyr;
}

Answer 1

如果您只是在尋找日期格式化程序，可以試試moment.js

moment("201905", "YYYYMM").format("MMMM YYYY");
// Output: May 2019

使用您發布的數據，您可能會遇到recharts的問題，因為它只接受包含對象的數組（不是像您的示例中那樣的數組）。 您需要將數組映射到對象。

const mapped = data.map(v => { return { date: v[0], someValue: v[3] } })

我把你的例子放在JSFiddle中 ，希望有所幫助。