在 JSON 的单个 Highcharts 图中绘制多个系列
Plotting multiple series in single Highcharts plot from JSON
所以我有一个 JSON 对象,我正尝试使用 Highcharts
绘制它。 JSON 对象类似于以下内容:
json_data = [
{
'name': "col1",
'data': [1, 2, 3, 4, 5]},
{
'name': "col2",
'data': [2, 4, 6, 8, 10]},
{
'name': "col3",
'data': [2, 3, 4, 5, 6]},
{
'name': "col4",
'data': [-1, -2, -3, -4, -5]},
]
我可以通过 Highcharts
使用以下代码绘制它:
$('#container').highcharts({
chart: {
type: 'line',
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
},
title: {
text: 'Data',
x: -20 // center title
},
xAxis: {
title: {text: 'Velocity (m/sec)'},
},
yAxis: {title: {text: 'Force (N)'}},
series: json_data,
});
这绘制了我的 json_data
中的所有 4 列,但我想要做的是绘制 col2
对 col1
和 col4
对 col3
在同一张图表上,因此图表中只有 2 个线图。换句话说,x 轴将由 col1
和 col3
定义,并且两条线图将具有不同的间隔(x-ticks)。我知道我可以在 series:
参数中定义不同的 series
,但我正在努力理解如何从我的 JSON 对象中 select 这些。
基本上我需要将我的 JSON 从它的原始格式重新排列成两个看起来像这样的数据系列:
// col2 against col1
series1 = [ [1, 2],
[2, 4],
[3, 6],
[4, 8],
[5, 10]
]
// col4 against col3
series2 = [ [2, -1],
[3, -2],
[4, -3],
[5, -4],
[6, -5]
]
如果能帮助我实现这一点,我将不胜感激。
这里的任何后代都是我想出的解决方案,它假设每个数据数组的长度都相同(我的用例):
var arr = [json_data];
// first series data to plot
var series1 = [];
for (var i = 0; i < arr[0][0].data.length; i++)
{
var temp = [];
temp.push(arr[0][0].data[i]);
temp.push(arr[0][1].data[i]);
series1.push(temp);
}
// second series data to plot
var series2 = [];
for (var i = 0; i < arr[0][0].data.length; i++)
{
var temp = [];
temp.push(arr[0][2].data[i]);
temp.push(arr[0][3].data[i]);
series2.push(temp);
}
在我的 highcharts series:
参数中:
series: [{
name: "Series 1",
data: series1
}, {
name: "Series 2",
data: series2
}],
所以我有一个 JSON 对象,我正尝试使用 Highcharts
绘制它。 JSON 对象类似于以下内容:
json_data = [
{
'name': "col1",
'data': [1, 2, 3, 4, 5]},
{
'name': "col2",
'data': [2, 4, 6, 8, 10]},
{
'name': "col3",
'data': [2, 3, 4, 5, 6]},
{
'name': "col4",
'data': [-1, -2, -3, -4, -5]},
]
我可以通过 Highcharts
使用以下代码绘制它:
$('#container').highcharts({
chart: {
type: 'line',
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
},
title: {
text: 'Data',
x: -20 // center title
},
xAxis: {
title: {text: 'Velocity (m/sec)'},
},
yAxis: {title: {text: 'Force (N)'}},
series: json_data,
});
这绘制了我的 json_data
中的所有 4 列,但我想要做的是绘制 col2
对 col1
和 col4
对 col3
在同一张图表上,因此图表中只有 2 个线图。换句话说,x 轴将由 col1
和 col3
定义,并且两条线图将具有不同的间隔(x-ticks)。我知道我可以在 series:
参数中定义不同的 series
,但我正在努力理解如何从我的 JSON 对象中 select 这些。
基本上我需要将我的 JSON 从它的原始格式重新排列成两个看起来像这样的数据系列:
// col2 against col1
series1 = [ [1, 2],
[2, 4],
[3, 6],
[4, 8],
[5, 10]
]
// col4 against col3
series2 = [ [2, -1],
[3, -2],
[4, -3],
[5, -4],
[6, -5]
]
如果能帮助我实现这一点,我将不胜感激。
这里的任何后代都是我想出的解决方案,它假设每个数据数组的长度都相同(我的用例):
var arr = [json_data];
// first series data to plot
var series1 = [];
for (var i = 0; i < arr[0][0].data.length; i++)
{
var temp = [];
temp.push(arr[0][0].data[i]);
temp.push(arr[0][1].data[i]);
series1.push(temp);
}
// second series data to plot
var series2 = [];
for (var i = 0; i < arr[0][0].data.length; i++)
{
var temp = [];
temp.push(arr[0][2].data[i]);
temp.push(arr[0][3].data[i]);
series2.push(temp);
}
在我的 highcharts series:
参数中:
series: [{
name: "Series 1",
data: series1
}, {
name: "Series 2",
data: series2
}],