![](/img/trans.png)
[英]how to Convert JSON data Object into Highcharts Series data?
[英]How to convert custom JSON Object into Highcharts Series data?
我的 API 結尾有一個自定義 JSON 格式,我需要將其轉換為 Highcharts 系列數據格式,
我的自定義 Json 格式:
[{
"personId": "7b9b19a8-0052-4036-9d27-721371a3a077",
"pid": "PID-2",
"averageCycleTime": 1.28,
"idealCycleTime": 1.28,
"cycleDetails": [{
"cycleId": "fdc074a0-e839-4a93-bdca-93562788fd8d",
"visionCycleId": "2",
"cycleDuration": 12.5,
"actionDetails": null
},
{
"cycleId": "85d5b577-306f-4d69-9649-732ddfc7b228",
"visionCycleId": "1",
"cycleDuration": 12.5,
"actionDetails": null
}
]
},
{
"personId": "f2a2d7b1-e099-4f78-8bfd-804158d21b09",
"pid": "PID-1",
"averageCycleTime": 1.28,
"idealCycleTime": 1.28,
"cycleDetails": [{
"cycleId": "5860c566-cbf9-4d36-be1e-21e27402e8c1",
"visionCycleId": "1",
"cycleDuration": 12.5,
"actionDetails": null
},
{
"cycleId": "7acf1cab-7d55-412e-8381-102d5aad0a3a",
"visionCycleId": "2",
"cycleDuration": 12.5,
"actionDetails": null
}
]
}
]
從上面的 JSON 中,“cycleDetails”鍵值的詳細信息應放置如下
series: [{
name: 'Cycle-1',
data: [{y:5, videoID : 'Video1'}, {y: 3, videoID : 'Video2'}],
}, {
name: 'Cycle-2',
data: [{y:5, videoID : 'Video1'}, {y: 3, videoID : 'Video2'}]
}]
** Y 上的 CycleDuration 和 cycleId 到 VideoID。
嘗試這個:
const customJson = [
{
personId: '7b9b19a8-0052-4036-9d27-721371a3a077',
pid: 'PID-2',
averageCycleTime: 1.28,
idealCycleTime: 1.28,
cycleDetails: [
{
cycleId: 'fdc074a0-e839-4a93-bdca-93562788fd8d',
visionCycleId: '2',
cycleDuration: 12.5,
actionDetails: null,
},
{
cycleId: '85d5b577-306f-4d69-9649-732ddfc7b228',
visionCycleId: '1',
cycleDuration: 12.5,
actionDetails: null,
},
],
},
{
personId: 'f2a2d7b1-e099-4f78-8bfd-804158d21b09',
pid: 'PID-1',
averageCycleTime: 1.28,
idealCycleTime: 1.28,
cycleDetails: [
{
cycleId: '5860c566-cbf9-4d36-be1e-21e27402e8c1',
visionCycleId: '1',
cycleDuration: 12.5,
actionDetails: null,
},
{
cycleId: '7acf1cab-7d55-412e-8381-102d5aad0a3a',
visionCycleId: '2',
cycleDuration: 12.5,
actionDetails: null,
},
],
},
];
const series = customJson.map((value, key) => {
return {
name: `Cycle-${key + 1}`,
data: value.cycleDetails.map((v) => ({
y: v.cycleDuration,
videoId: v.cycleId,
})),
};
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.