时间戳

首页 > 解决方案 > 在 ReactJS 中动态创建雷达图

javascript - 在 ReactJS 中动态创建雷达图

问题描述

我有一个端点，我已经正确接收了我的数据，我的问题与我需要格式化我的数据以便我可以在雷达图中显示它有关。

雷达数据格式如下：

[ { rating: "rating_field", dataA: data_value, dataB: data_value }...];

但是我的数据结构是这样的：

reviews: [ {average_rating: 6.3,safety_rating: 6.3,comfort_rating: 7.1 ...} ]

因此，我考虑通过 forEachs 和 maps 进行一些操作，以便我可以重新格式化这些数据并最终得到类似于第一个示例的内容，为了清楚起见，我有一系列评论，每个评论都将被视为 dataA 或雷达图数据结构中的dataB（或C ...）。

那么，有没有人有更好的主意或者我应该坚持使用 forEachs 和地图？

标签： javascriptchartsradar-chart

解决方案

当你有 reduce 时，你不需要 forEach，它使你的代码更具功能性和不可变性

const api_data = {
  reviews: [
    {average_rating: 6.3,safety_rating: 6.3,comfort_rating: 7.1},
    {average_rating: 6.4,safety_rating: 6.4,comfort_rating: 7.2},
    {average_rating: 7.3,safety_rating: 7.3,comfort_rating: 8.1},
  ]
};

const letters = ["A", "B", "C", "D"];

const format_rating = (reviews) => (rating_name) =>
  reviews.reduce((acc, review, index) =>
    ({...acc,
     [`data${letters[index]}`]: review[rating_name]}),
    {rating: rating_name});

const ratings = ["average_rating", "safety_rating", "comfort_rating"];

const radar_data = ratings.map(format_rating(api_data.reviews));

console.log(radar_data);

推荐阅读