javascript - Highcharts 中的多个类别和系列

Question

我一直在开发一个应用程序，以在单个图表中可视化从系泊浮标收集的数据的多个垂直剖面。

这种可视化的示例如下所示 https://jsfiddle.net/ordicu85/9g035cpo/其中图表显示了 o2_concentration 与相关深度测量值的两个垂直剖面。

我需要解决以下问题:

1. 仅显示图例中所有事件系列通用的单个垂直轴(深度)。它应该针对图例中的所有事件系列自动调整。

2. 标准化垂直轴上的值，例如:0、10、20、30、40...而不是所有这些小数值。

这是 highchart 代码，其中类别代表深度测量值，系列代表 o2_concentration 测量值。第一个类别对应于第一个数据系列，第二个类别对应于第二个数据系列:

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
}]

});

拜托，我将不胜感激在这些方向上的任何帮助，我已经奋斗了好几天但没有成功。

Answer 1

您将通过定义 2 个 xAxis 并设置它们的类别来覆盖默认行为。为了得到你想要的，让 highcharts 来做它的事情。您需要将数据转换为 {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

  }]
});

https://jsfiddle.net/9g035cpo/2/