[英]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? 有人可以帮我吗?
{
"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
}
}
}
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.