尝试使用在分组盒图上覆盖散点图海图.js

我试着用海图.js.

我想要达到的目标与这个例子类似: https://www.highcharts.com/demo/box-plot

然而,这个例子并没有在x轴上分组。

我可以按我需要的方式在x轴上对我的散点图进行分组,但是,当每个x轴单位有多个框时,关联的散点图会显示在框之间,而(如示例中所示),我希望散点图与相应的框对齐。

Highcharts.chart('container', {

  chart: {
    type: 'boxplot'
  },

  title: {
    text: 'Trying to get scatter plot outliers to line up with the box they go with'
  },

  legend: {
    enabled: false
  },

  xAxis: {
    categories: ['1', '2', '3', '4', '5'],
    title: {
      text: 'Experiment No.'
    }
  },

  yAxis: {
    title: {
      text: 'Observations'
    },

  },

  series: [{
    name: 'Group A Observations',
    data: [
      [760, 801, 848, 895, 965],
      [733, 853, 939, 980, 1080],
      [714, 762, 817, 870, 918],
      [724, 802, 806, 871, 950],
      [834, 836, 864, 882, 910]
    ],
    tooltip: {
      headerFormat: '<em>Experiment No {point.key}</em><br/>'
    }
  },
           {
    name: 'Group B Observations',
    data: [
      [760, 831, 828, 795, 965],
      [733, 883, 939, 980, 1080],
      [714, 762, 827, 890, 918],
      [724, 802, 806, 971, 950],
      [834, 836, 864, 882, 910]
    ],
    tooltip: {
      headerFormat: '<em>Experiment No {point.key}</em><br/>'
    }
  },
           {
    name: 'Group A Outliers',
    color: Highcharts.getOptions().colors[0],
    type: 'scatter',
    data: [ // x, y positions where 0 is the first category
      [0, 644],
      [1, 718],
      [2, 951],
      [3, 969],
      [4, 969]
    ],
    marker: {
      fillColor: 'white',
      lineWidth: 1,
      lineColor: Highcharts.getOptions().colors[0]
    },
    tooltip: {
      pointFormat: 'Observation: {point.y}'
    }
  },
          {
    name: 'Group B Outliers',
    color: Highcharts.getOptions().colors[0],
    type: 'scatter',
    data: [ // x, y positions where 0 is the first category
      [0, 544],
      [1, 818],
      [2, 451],
      [3, 669],
      [4, 469]
    ],
    marker: {
      fillColor: 'white',
      lineWidth: 1,
      lineColor: Highcharts.getOptions().colors[0]
    },
    tooltip: {
      pointFormat: 'Observation: {point.y}'
    }
  }]

});

您也可以在这个代码笔上看到它: https://codepen.io/jennEDVT/pen/NLvgod?editors=0010

所需的行为是将“A组异常值”直接排列在“A组观察值”框的上方/下方/上方。并将“B组异常值”直接排列在“B组观察值”框的上方/下方/上方。但是现在A组和B组的异常值都分散在两个盒子之间。