javascript - Highcharts:如何绘制不同箱线图的相邻散点

Question

在上图中，我有两个箱线图系列及其各自的异常值散点。但由于两个系列的数据相同，因此一个箱线图系列的异常值与其他箱线图系列的异常值重叠。我可以实现类似将每个框的离群点恰好位于其下方而不合并到单个点之类的目标吗？也就是说，散点应该并排放置，就像放置盒子一样，并且不应该重叠。

Answer 1

更新

基于已经绘制的箱线图，可以通过动态计算来实现更准确的散点位置。

在加载事件中，您可以抓取箱线图的中间并将该值设置为散点 x 坐标。

 events: {
   load: function() {
        const boxplotSeries = this.series.slice(0, 2);

        const calculateOutlierX = (category, series) => {
          const point = series.data[category];
          const shapeArgs = point.shapeArgs;
          const corr = (point.stem.strokeWidth() % 2) / 2;

        return series.xAxis.toValue(shapeArgs.x + (shapeArgs.width / 2) + series.group.translateX + corr);
      }



        const adjustedOutliers = this.series.slice(2).map((series, i, ser) => {
        return series.data.map(point => [calculateOutlierX(point.x, boxplotSeries[i]), point.y]);
      });

         this.series[2].setData(adjustedOutliers[0], false);
        this.series[3].setData(adjustedOutliers[1], true);
    }
  }

实例:http://jsfiddle.net/sza4odkz/1/

更新前

您需要调整散点的位置。例如，如果您想调整散点以适合左侧箱线图，请从其 x 坐标中减去 0.2。同样，要适合右侧箱线图，请添加 0.2

{
  data: [
    [0 - 0.2, 644],
    [4 - 0.2, 718],
    [4 - 0.2, 951],
    [4 - 0.2, 969]
  ]
}, {
  data: [
    [0 + 0.2, 644],
    [4 + 0.2, 718],
    [4 + 0.2, 951],
    [4 + 0.2, 969]
  ]

实例和输出

http://jsfiddle.net/sza4odkz/

Highcharts.chart('container', {

  chart: {
    type: 'boxplot'
  },

  series: [{
    name: '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]
    ],
  }, {
    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]
    ]
  }, {
    name: 'Outlier',
    color: Highcharts.getOptions().colors[0],
    type: 'scatter',
    data: [ // x, y positions where 0 is the first category
      [0 - 0.2, 644],
      [4 - 0.2, 718],
      [4 - 0.2, 951],
      [4 - 0.2, 969]
    ]
  }, {
    name: 'Outlier 2',
    color: Highcharts.getOptions().colors[1],
    type: 'scatter',
    data: [ // x, y positions where 0 is the first category
      [0 + 0.2, 644],
      [4 + 0.2, 718],
      [4 + 0.2, 951],
      [4 + 0.2, 969]
    ]
  }]

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>