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/

Pre-update

您需要调整散点的位置。例如，如果您想调整散点以适应左侧箱线图，请从其 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>

Highcharts：如何为不同的箱形图绘制相邻的散点

Highcharts: How to plot adjacent scatter points for different box plots

javascript

boxplot

highcharts

highstock

更新

Pre-update

实例和输出