Цикл Highcharts JSON Object для заполнения ряда данных

Question

Я очень новичок в Java Script и пытаюсь выяснить, как перебрать мой объект JSON и заполнить ряд данных Highcharts следующим объектом JSON.Я сделал макет статического отображения того, что я пытаюсь сделать с JS Fiddle. JsFiddleLink

Может кто-нибудь помочь мне в этом?

вот мой объект JSON, который я хочу циклически просмотреть и заполнить серию данных Highcharts.

{
    "OuterKey": {
        "v4_acl": {
            "aggregate": 100,
            "S1": 40,
            "S2": 30,
            "S3": 20,
            "S4": 10
        },
        "v6_acl": {
            "aggregate": 120,
            "S1": 14,
            "S2": 13,
            "S3": 12,
            "S4": 11
        },
        "v4_qos": {
            "aggregate": 125,
            "S1": 30,
            "S2": 14,
            "S3": 17,
            "S4": 19
        },
        "v6_qos": {
            "aggregate": 80,
            "S1": 22,
            "S2": 21,
            "S3": 20,
            "S4": 23
        },
        "v4_nf": {
            "aggregate": 90,
            "S1": 20,
            "S2": 20,
            "S3": 20,
            "S4": 26
        },
        "v6_nf": {
            "aggregate": 111,
            "S1": 11,
            "S2": 44.5,
            "S3": 45,
            "S4": 80.5
        },
        "baseline": {
            "aggregate": 130,
            "S1": 60,
            "S2": 10,
            "S3": 10,
            "S4": 10
        }
    }
}

Также здесь показан снимок экрана этой статически отображаемой визуализированной диаграммы.

Answer 1

Я думаю, что это то преобразование, которое вам нужно:

const raw = {
    "OuterKey": {
        "v4_acl": {
            "aggregate": 100,
            "S1": 40,
            "S2": 30,
            "S3": 20,
            "S4": 10
        },
        "v6_acl": {
            "aggregate": 120,
            "S1": 14,
            "S2": 13,
            "S3": 12,
            "S4": 11
        },
        "v4_qos": {
            "aggregate": 125,
            "S1": 30,
            "S2": 14,
            "S3": 17,
            "S4": 19
        },
        "v6_qos": {
            "aggregate": 80,
            "S1": 22,
            "S2": 21,
            "S3": 20,
            "S4": 23
        },
        "v4_nf": {
            "aggregate": 90,
            "S1": 20,
            "S2": 20,
            "S3": 20,
            "S4": 26
        },
        "v6_nf": {
            "aggregate": 111,
            "S1": 11,
            "S2": 44.5,
            "S3": 45,
            "S4": 80.5
        },
        "baseline": {
            "aggregate": 130,
            "S1": 60,
            "S2": 10,
            "S3": 10,
            "S4": 10
        }
    }
};

const seriesObj = Object.values(raw.OuterKey)
  .reduce((memo, v) => { 
    for (s in v) { 
      memo[s] = memo[s] || []; 
      memo[s].push(v[s]); 
    } 
    return memo; 
  }, {});
  
const series = Object.entries(seriesObj)
  .map(([name, data]) => ({name, data}));

Highcharts.chart('container', {
    title: {
        text: 'My JSON Chart'
    },
    yAxis: {
        title: {
            text: 'JSON VALUE'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    xAxis: {
        categories: Object.keys(raw.OuterKey),
        crosshair: true
    },
    series
});

#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>