在React.js中可视化Google Analytics(分析)数据,编辑JSON

时间:2019-06-03 20:22:44

标签: javascript reactjs data-visualization google-analytics-api recharts

我正在从Google Analytics(分析)中提取数据以显示在用户仪表板上。这是我在React中的第一个可视化项目,我决定使用图表进行可视化。但是,我想重新格式化一些Google Analytics(分析)数据,使其看起来很漂亮,例如日期。

我正在努力编写一个遍历我的数据数组并重新格式化数据201903的函数,例如将其格式化为2019年3月3日(甚至更好的是2019年3月)。我只需要一个可以做到这一点的功能。但是,我没有从数组中提取此类数据的经验。

这是我的数据:

[ [ '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;
}

1 个答案:

答案 0 :(得分:0)

如果您只是在寻找日期格式化程序,可以尝试一下moment.js

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

使用您发布的数据,您可能会遇到图表问题,因为它仅接受其中包含对象的数组(而不是示例中的数组)。您将需要将数组映射到对象。

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

我将您的示例放在JSFiddle中,希望对您有所帮助。