如何将我的 JSON 结构更改为 chartJS 条形图 JSON 结构？

Question

[

  0: {flight: "Spicejet", range: "min", Jul 1: 2397, Jul 2: 2397, Jul 3: 2397},

1: {flight: "Spicejet", range: "max", Jul 1: 3045, Jul 2: 3045, Jul 3: 3045,},

2: {flight: "Spicejet", range: "med", Jul 1: 2789, Jul 2: 2789, Jul 3: 2789,},

3: {flight: "Indigo", range: "min", Jul 1: 3000, Jul 2: 3000, Jul 3: 3000,},

4: {flight: "Indigo", range: "max", Jul 1: 5000, Jul 2: 5000, Jul 3: 5000,},

5: {flight: "Indigo", range: "med", Jul 1: 4000, Jul 2: 4000, Jul 3: 4000,},

] 

进入

labels: ["Jul 1","Jul 2","Jul 3"],

datasets: [

          {

            label: "SpiceJet",

            data: [3045,3045,3045],

          },

          {

            label: "airways",

            data: [5000,5000,5000],

          },

   ]

对于 chartJS reactjs（线图）。在这种情况下，chartjs 很复杂，请在此提供一些解决方案。在数据集中[{data:[仅获取范围“最大值”]}]

Answer 1

虽然关于目标格式的预期用途的问题尚不清楚，但可以轻松实现示例的实际转换。如果我们假设所有输入元素共享相同的数据属性（Jul *在这种情况下），我们可以从任意输入元素中提取标签。数据集可以通过映射输入数据获得。// a filter function to determine the data properties we're interested inlet dataPropertiesFilter = (k) =>  k !== "flight" && k !== "range";let result = {  // this assumes the first element has all data properties set and subsequent ones share the same properties  labels: Object.keys(input[0]).filter(dataPropertiesFilter),  // transforms each input element into the target format  datasets: input.map(e => {    return {      label: e.flight,      data: Object.keys(e)        .filter(dataPropertiesFilter)        .map(v => e[v])    };  })};这是一个用于演示的代码框：https ://codesandbox.io/s/stack-overflow-q-62406854-vzxnq?file=/src/index.js