[
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 "的值]}。]
虽然这个问题对目标格式的预期用途很不清楚,但实际的例子转换很容易实现。
如果我们假设所有的输入元素共享相同的数据属性(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。