Javascript 海图中的多个类别和系列
我一直在开发一个应用程序,将从系泊浮标收集的数据在一张图表中显示为多个垂直剖面 这种可视化的一个示例类似于下面的示例,其中图表显示了o2_浓度与相关深度测量的两个垂直剖面 我需要解决以下问题:Javascript 海图中的多个类别和系列,javascript,highcharts,Javascript,Highcharts,我一直在开发一个应用程序,将从系泊浮标收集的数据在一张图表中显示为多个垂直剖面 这种可视化的一个示例类似于下面的示例,其中图表显示了o2_浓度与相关深度测量的两个垂直剖面 我需要解决以下问题: 仅显示图例中所有活动系列共用的单个垂直轴(深度)。对于图例中的所有激活系列,应自动进行调整 规范化垂直轴中的值,例如:0、10、20、30。40…而不是所有的十进制值 以下是highchart代码,其中类别表示深度测量,系列表示o2_浓度测量。第一类对应于第一个数据系列,第二类针对第二个数据系列: let
let chart = Highcharts.chart('container', {
chart: { type: "line", inverted: true, zoomType: "xy"
},
title: {
text: 'o2 concentration vs depth'
},
xAxis: [
{
categories: [0.38, 1.02, 2.01, 3.06, 4.01, 5.05, 6, 7.05, 8.01, 9.02,
10.03, 11, 12.08, 13.04, 14.06, 15.07, 16.02, 17.04, 18.09, 19.03,
20.03, 21.04, 22.07, 23.04, 24.04, 25, 26, 27.05, 28.04, 29.06, 30.05],
reversed: true, title:{text:'depth'}
},
{
categories: [0.37, 1.01, 2, 3, 4.03, 5.05, 6.03, 7, 8.02, 9.03, 10.01,
11.08, 12.03, 13.04, 14.06, 15.04, 16.01, 17, 18.03, 19.05, 20.01,
21.11, 22.07, 23.04, 24.09, 25.03, 26.03, 27.06, 28.01, 29.02, 30.07,
31, 32, 33.02, 34, 35.05, 36.02, 37.03, 38.04], reversed: true, title:
{text:'depth'}
},
],
yAxis: {
title: {
text: 'o2 concentration'
}
},
series: [{
name: 'Serie A',
data: [ 95.7, 82.7, 95.4, 96.5, 97.3, 98, 98.4, 98.8, 99.1, 99.4, 99.5,
99.6, 99.7, 99.8, 99.9, 100, 100.1, 100.2, 100.2, 100.2, 100.1, 100.1,
100, 99.9, 99.9, 100, 100.1, 100.2, 100.2, 100.3, 100.4],
xAxis:0
}, {
name: 'Serie B',
data: [96.7, 85.6, 92, 97.7, 98.1, 98.5, 98.9, 99.3, 99.6, 99.8, 100,
100.1, 100.2, 100.3, 100.4, 100.6, 100.9, 101.1, 101.2, 101.1, 101,
100.9, 100.9, 101, 101, 101, 101, 101.1, 101.1, 101.1, 101.1, 101.1,
101.1, 101.1, 101, 101, 100.9, 100.9, 100.9 ],
xAxis:1
}]
}))
请,如果您能在这些方面提供帮助,我将不胜感激。我已经挣扎了好几天,但都没有成功。您正在通过定义2个Xaxi并设置它们的类别来覆盖默认行为。为了得到你想要的,让海图做它的事情。您需要将数据转换为{x:val1,y:val2}对象。我是用代码做的,因为我懒得输入所有这些数字
var xAxis1 = [0.38, 1.02, 2.01, 3.06, 4.01, 5.05, 6, 7.05, 8.01, 9.02,
10.03, 11, 12.08, 13.04, 14.06, 15.07, 16.02, 17.04, 18.09, 19.03,
20.03, 21.04, 22.07, 23.04, 24.04, 25, 26, 27.05, 28.04, 29.06, 30.05
];
var xAxis2 = [0.37, 1.01, 2, 3, 4.03, 5.05, 6.03, 7, 8.02, 9.03, 10.01,
11.08, 12.03, 13.04, 14.06, 15.04, 16.01, 17, 18.03, 19.05, 20.01,
21.11, 22.07, 23.04, 24.09, 25.03, 26.03, 27.06, 28.01, 29.02, 30.07,
31, 32, 33.02, 34, 35.05, 36.02, 37.03, 38.04
];
var data1 = [95.7, 82.7, 95.4, 96.5, 97.3, 98, 98.4, 98.8, 99.1, 99.4, 99.5,
99.6, 99.7, 99.8, 99.9, 100, 100.1, 100.2, 100.2, 100.2, 100.1, 100.1,
100, 99.9, 99.9, 100, 100.1, 100.2, 100.2, 100.3, 100.4
];
var data2 = [96.7, 85.6, 92, 97.7, 98.1, 98.5, 98.9, 99.3, 99.6, 99.8, 100,
100.1, 100.2, 100.3, 100.4, 100.6, 100.9, 101.1, 101.2, 101.1, 101,
100.9, 100.9, 101, 101, 101, 101, 101.1, 101.1, 101.1, 101.1, 101.1,
101.1, 101.1, 101, 101, 100.9, 100.9, 100.9
];
for (var i = 0; i < xAxis1.length; i++) {
data1[i] = {
x: xAxis1[i],
y: data1[i]
};
}
for (i = 0; i < xAxis2.length; i++) {
data2[i] = {
x: xAxis2[i],
y: data2[i]
};
}
var chart = Highcharts.chart('container', {
chart: {
type: "line",
inverted: true,
zoomType: "xy"
},
title: {
text: 'o2 concentration vs depth'
},
xAxis: [{
reversed: true,
title: {
text: 'depth'
}
}, ],
yAxis: {
title: {
text: 'o2 concentration'
}
},
series: [{
name: 'Serie A',
data: data1
}, {
name: 'Serie B',
data: data2
}]
});
var xAxis1=[0.38,1.02,2.01,3.06,4.01,5.05,6,7.05,8.01,9.02,
10.03, 11, 12.08, 13.04, 14.06, 15.07, 16.02, 17.04, 18.09, 19.03,
20.03, 21.04, 22.07, 23.04, 24.04, 25, 26, 27.05, 28.04, 29.06, 30.05
];
变量xAxis2=[0.37,1.01,2,3,4.03,5.05,6.03,7,8.02,9.03,10.01,
11.08, 12.03, 13.04, 14.06, 15.04, 16.01, 17, 18.03, 19.05, 20.01,
21.11, 22.07, 23.04, 24.09, 25.03, 26.03, 27.06, 28.01, 29.02, 30.07,
31, 32, 33.02, 34, 35.05, 36.02, 37.03, 38.04
];
VarData1=[95.7,82.7,95.4,96.5,97.3,98,98.4,98.8,99.1,99.4,99.5,
99.6, 99.7, 99.8, 99.9, 100, 100.1, 100.2, 100.2, 100.2, 100.1, 100.1,
100, 99.9, 99.9, 100, 100.1, 100.2, 100.2, 100.3, 100.4
];
VarData2=[96.7,85.6,92,97.7,98.1,98.5,98.9,99.3,99.6,99.8,100,
100.1, 100.2, 100.3, 100.4, 100.6, 100.9, 101.1, 101.2, 101.1, 101,
100.9, 100.9, 101, 101, 101, 101, 101.1, 101.1, 101.1, 101.1, 101.1,
101.1, 101.1, 101, 101, 100.9, 100.9, 100.9
];
对于(var i=0;i
非常感谢您抽出时间回答芭芭拉,这正是我想要的。祝您有个美好的一天!!!