【发布时间】：2018-12-24 01:42:08
【问题描述】：
我是 Javascript 的新手，我有以下 Java 脚本对象，我试图循环并让它从 Highcharts 呈现图表。我在下面给出了一个静态图表示例，说明我正在尝试使用我收到的对象实现什么。如果有人可以在这方面提供帮助，将不胜感激。
这也是我静态渲染的jSFiddle Link。
我的对象：
const myObj = [
[
{
"baselinePerformance": [
{
"aggregate": 99,
"mcast 1-2": 98,
"mcast 2-1": 97,
"mpls-mpls-1-2": 96,
"mpls-mpls-2-1": 95,
"mpls-mpls-3-4": 94,
"mpls-mpls-4-3": 93,
"v6-v6 1-2": 92,
"v6-v6 2-1": 91,
"v6-v6 3-4": 90,
"v6-v6 4-3": 90
}
]
}
],
[
{
"in_qos": [
{
"aggregate": 89,
"mcast 1-2": 88,
"mcast 2-1": 87,
"mpls-mpls-1-2": 86,
"mpls-mpls-2-1": 85,
"mpls-mpls-3-4": 84,
"mpls-mpls-4-3": 83,
"v6-v6 1-2": 82,
"v6-v6 2-1": 81,
"v6-v6 3-4": 80.5,
"v6-v6 4-3": 80
}
]
}
],
[
{
"v4_in_net_flow": [
{
"aggregate": 79,
"mcast 1-2": 78,
"mcast 2-1": 77,
"mpls-mpls-1-2": 76,
"mpls-mpls-2-1": 75,
"mpls-mpls-3-4": 74,
"mpls-mpls-4-3": 73,
"v6-v6 1-2": 72,
"v6-v6 2-1": 71,
"v6-v6 3-4": 70.5,
"v6-v6 4-3": 70
}
]
}
],
[
{
"v6_in_net_flow": [
{
"aggregate": 69,
"mcast 1-2": 68,
"mcast 2-1": 67,
"mpls-mpls-1-2": 66,
"mpls-mpls-2-1": 65,
"mpls-mpls-3-4": 64,
"mpls-mpls-4-3": 63,
"v6-v6 1-2": 62,
"v6-v6 2-1": 61,
"v6-v6 3-4": 60.6,
"v6-v6 4-3": 60
}
]
}
],
[
{
"mpls_in_net_flow": [
{
"aggregate": 59,
"mcast 1-2": 58,
"mcast 2-1": 57,
"mpls-mpls-1-2": 56,
"mpls-mpls-2-1": 55,
"mpls-mpls-3-4": 54,
"mpls-mpls-4-3": 53,
"v6-v6 1-2": 52,
"v6-v6 2-1": 51,
"v6-v6 3-4": 50.5,
"v6-v6 4-3": 50
}
]
}
]
]
我的图表代码示例：
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'MyChart'
},
xAxis: {
categories: [
'baselinePerformance',
'in_qos',
'v4_in_net_flow',
'v6_in_net_flow',
'mpls_in_net_flow'
],
crosshair: true
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'aggregate',
data: [49.9, 71.5, 106.4, 129.2, 144.0]
}, {
name: 'mcast 1-2',
data: [83.6, 78.8, 98.5, 93.4, 106.0]
}, {
name: 'mcast 2-1',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
}, {
name: 'mpls-mpls-1-2',
data: [42.4, 33.2, 34.5, 39.7, 52.6]
},{
name: 'mpls-mpls-2-1',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
},{
name: 'mpls-mpls-3-4',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
},{
name: 'mpls-mpls-4-3',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
},{
name: 'v6-v6 1-2',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
},{
name: 'v6-v6 2-1',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
},{
name: 'v6-v6 3-4',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
},{
name: 'v6-v6 4-3',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
},
]
});
【问题讨论】：
-
您的 jsfiddle 工作正常，您的预期输出是什么？
-
这个jsfiddle只是静态数据。我正在尝试遍历对象并以与我在示例中构造静态图表相同的方式填充图表。
-
如果您查看图表系列数据，您会发现我只是将静态数据放在那里。
-
这取决于您尝试填充图表的方式，您的静态数据不会显示任何关系，您要放入哪个键？
-
x 轴将填充对象中的外部键，例如“baselinePerformance”、“in_qos”..等。那么数据系列将由内部键值和数据组成。
标签： javascript jquery highcharts javascript-objects