使用array.map（）或array.reduce（）创建图表数组

Question

我有这个数组：

this.list = [
      { id: 12, status: 2, number: 10 },
      { id: 2, status: 2, number: 300 },
      { id: 2, status: 2, number: 12 },
      { id: 4, status: 2, number: 65 },
      { id: 6, status: 2, number: 129 },
      { id: 7, status: -100, number: 21 },
      { id: 7, status: 2, number: 2 },
      { id: 7, status: 3, number: 3 },
      { id: 7, status: 4, number: 76 },
      { id: 8, status: -100, number: 77 },
      { id: 8, status: 2, number: 48 },
      { id: 8, status: 3, number: 17 },
      { id: 8, status: 4, number: 14 },
      { id: 8, status: 6, number: 10 },
      { id: 8, status: 7, number: 5 },
      { id: 8, status: 8, number: 5 },
      { id: 8, status: 9, number: 4 },
      { id: 9, status: 2, number: 140 },
      { id: 9, status: 9, number: 1 },
      { id: 11, status: 2, number: 141 },
      { id: 15, status: 2, number: 86 },
      { id: 19, status: 2, number: 71 },
      { id: 17, status: 2, number: 141 }
    ];

我需要使用ng2-charts生成图表。如何将数组映射到图表数组？

示例：

  public barChartLabels: number[] = [unique number from list.status];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = true;

  public barChartData: any[] = [
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' },
    { data: [list.number], label: 'unique list.id' }
  ];

在数据中，我需要数组list.number按id分组和按标签分组：list.id 当没有此状态的编号时，我需要粘贴list.number = 0

我该怎么做？

Answer 1

您可以使用Array.reduce()获取该输出结构：

var arr = [{
    id: 12,
    status: 2,
    number: 10
  },
  {
    id: 2,
    status: 2,
    number: 300
  },
  {
    id: 2,
    status: 2,
    number: 12
  },
  {
    id: 4,
    status: 2,
    number: 65
  },
  {
    id: 6,
    status: 2,
    number: 129
  },
  {
    id: 7,
    status: -100,
    number: 21
  },
  {
    id: 7,
    status: 2,
    number: 2
  },
  {
    id: 7,
    status: 3,
    number: 3
  },
  {
    id: 7,
    status: 4,
    number: 76
  },
  {
    id: 8,
    status: -100,
    number: 77
  },
  {
    id: 8,
    status: 2,
    number: 48
  },
  {
    id: 8,
    status: 3,
    number: 17
  },
  {
    id: 8,
    status: 4,
    number: 14
  },
  {
    id: 8,
    status: 6,
    number: 10
  },
  {
    id: 8,
    status: 7,
    number: 5
  },
  {
    id: 8,
    status: 8,
    number: 5
  },
  {
    id: 8,
    status: 9,
    number: 4
  },
  {
    id: 9,
    status: 2,
    number: 140
  },
  {
    id: 9,
    status: 9,
    number: 1
  },
  {
    id: 11,
    status: 2,
    number: 141
  },
  {
    id: 15,
    status: 2,
    number: 86
  },
  {
    id: 19,
    status: 2,
    number: 71
  },
  {
    id: 17,
    status: 2,
    number: 141
  }
];

var res = arr.reduce((acc, item) => {
  var existItem = acc.find(({label}) => label === item.id);
  if (existItem) {
    existItem.data.push(item.number);
  } else {
    acc.push({
      data: [item.number],
      label: item.id
    });
  }
  return acc;
}, []);
console.log(res);

Answer 2

您可以使用reduce（）和map（），如下所示：

  //Grouping numbers by ID
let ids_to_data = yourListDataArray.reduce(function(obj,item) {
   obj[item.id] = obj[item.id] || [];
   obj[item.number].push(item.number);
   return obj;}, {});

 // Map() to the format you want 
let barChartData = Object.keys(ids_to_data).map( function(key) {
return {data: ids_to_data[key], label: key} })

Answer 3

我有这个数组：

@Async("asyncTaskExecutor")
public Future<Response> doTasks(Student student);

和图表需要两个数组：

this.list = [
      { id: 12, status: 2, number: 10 },
      { id: 2, status: 2, number: 300 },
      { id: 2, status: 2, number: 12 },
      { id: 4, status: 2, number: 65 },
      { id: 6, status: 2, number: 129 },
      { id: 7, status: -100, number: 21 },
      { id: 7, status: 2, number: 2 },
      { id: 7, status: 3, number: 3 },
      { id: 7, status: 4, number: 76 },
      { id: 8, status: -100, number: 77 },
      { id: 8, status: 2, number: 48 },
      { id: 8, status: 3, number: 17 },
      { id: 8, status: 4, number: 14 },
      { id: 8, status: 6, number: 10 },
      { id: 8, status: 7, number: 5 },
      { id: 8, status: 8, number: 5 },
      { id: 8, status: 9, number: 4 },
      { id: 9, status: 2, number: 140 },
      { id: 9, status: 9, number: 1 },
      { id: 11, status: 2, number: 141 },
      { id: 15, status: 2, number: 86 },
      { id: 19, status: 2, number: 71 },
      { id: 17, status: 2, number: 141 }
    ];

如何从数组创建图表数组？ data []必须按list.id和list.status加上list.number

之和进行分组

示例：

public barChartLabels: number[] = axis y (I need here unique status);
public barChartData: any[] = [{ data: [65, 59, 0, 81], label: 'Series A' }];

当我通过ID，状态和总和编号对示例进行分组时，我得到：

{id: 1, status: 4, number: 300},
{id: 1, status: 4, number: 12},

我需要将列表中的状态与beChartLabels中的状态进行比较，因为data [0] .status必须与beChartLabels [0]相同。

我该怎么做？