highcharts - 如何创建 2 个分离的 xAxis 图表

Question

我想创建如下图。我怎样才能创建这样的图表？

最大值必须在 xAxis 的中间。

标签： highcharts

Answer 1

您可以使用xAxis.categories设置 xAxis 标签，接下来您需要为数据中的每个点定义x值。

演示：https ://jsfiddle.net/BlackLabel/e7d6c2pm/

Highcharts.chart('container', {

  chart: {
    type: 'scatter'
  },

    xAxis: {
    categories: ['0m', '150m', '250m', '350m', '550m', '700m', '550m', '350m', '150m', '0m'],
    plotLines: [{
        value: 5,
      color: 'red'
    }]
  },

  series: [{
    data: [[0.1, 52], [2, 20], [3, 10], [2.5, 8], [2.8, 13]]
  }, {
    data: [[6, 52], [8, 20], [9, 10], [8.5, 8], [7, 13]]
  }]
});

API：https ://api.highcharts.com/highcharts/xAxis.categories