按键对项目进行分组，然后在一个图表中绘制相似的键。

Question

我有一个具有以下结构的对象；

{
  SensorA: [
    { id: 122, valueA: 345, "x-axis": 123344 },
    { id: 123, valueA: 125, "x-axis": 123344 },
    { id: 123, valueA: 185, "x-axis": 123344 },
    { id: 121, valueA: 95, "x-axis": 121344 },
    { id: 121, valueA: 125, "x-axis": 123144 }
  ],
  SensorB: [
    { id: 222, valueB: 785, "x-axis": 122344 },
    { id: 223, valueB: 485, "x-axis": 123394 },
    { id: 221, valueB: 432, "x-axis": 123344 }
  ],
  SensorN: [
    { id: 782, valueN: 295, "x-axis": 123344 },
    { id: 786, valueN: 895, "x-axis": 133344 },
    { id: 782, valueN: 755, "x-axis": 122245 },
    { id: 786, valueN: 295, "x-axis": 128844 }
  ]
}

每个数组键都有具有类似对象结构的对象，例如sensorB和valueB等等。我想做一个动态卡，它有一个类似键的图表，基本上是一个带有类似传感器的多行图的卡片。我知道它是如何发生的，但是我不知道如何构造代码，在这里任何人都可以帮助我，下面的图片显示了所需结果的说明

​

​

Answer 1

对于任何面临这样一个问题的人，我首先将数组分组为类似于我如何在问题中发布的对象，然后得到键和值。由于每个键都被索引为值，我循环遍历v-for中的键，然后将值索引作为该键作为支持项传递给被该键迭代的组件。

<div v-for="(sensor, index) in data.keys"
      :key="sensor.keys"
      class="q-pa-md col-xs-12 col-sm-6 "
    >
      <Chart :sensor="sensor" :arr="data.val[index]"></Chart>
    </div>