如何将我的JSON结构改为chartJS barchart JSON结构?

问题描述 投票:-1回答:1
[
  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(Linechart)。这种情况下,chartjs很复杂,请给出一些解决方案。在数据集[{data:[只获取范围 "max "的值]}。]

javascript reactjs chart.js
1个回答
1
投票

虽然这个问题对目标格式的预期用途很不清楚,但实际的例子转换很容易实现。

如果我们假设所有的输入元素共享相同的数据属性(Jul * 在本例中),我们可以从一个任意的输入元素中提取标签,数据集可以通过对输入数据的映射来获得。

// a filter function to determine the data properties we're interested in
let 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])
    };
  })
};

这里有一个codesandbox进行演示。https:/codesandbox.iosstack-overflow-q-62406854-vzxnq?file=srcindex.js。

© www.soinside.com 2019 - 2024. All rights reserved.