简体   繁体   English

Highcharts循环JSON对象以填充数据系列

[英]Highcharts loop JSON Object to fill data series

I am very new to Java Script and I am trying to figure out how to loop through my JSON object and fill the Highcharts data series with the following JSON object. 我是Java脚本的新手,我想弄清楚如何循环遍历JSON对象并使用以下JSON对象填充Highcharts数据系列。 I have mocked up a static display of what I am trying to do with JS Fiddle. 我已经模拟了我要使用JS Fiddle进行的静态显示。 JsFiddleLink JsFiddleLink

Can someone please help me on this? 有人可以帮我吗?

here is my JSON object that I want to loop through and fill the Highcharts data Series. 这是我要遍历并填充Highcharts数据系列的JSON对象。

{
    "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
        }
    }
}

Also here is a screen shot of that static displayed rendered chart. 这也是该静态显示的呈现图表的屏幕快照。

在此处输入图片说明

I think this does the transform you need: 我认为这可以完成您需要的转换:

 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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM