Question

我正在尝试使用highcharts.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组的离群值分散在两个框之间。

感谢您提供的任何帮助！

Answer 1

您可以使用 pointPlacement 属性：

   {
        name: 'Group A Outliers',
        color: Highcharts.getOptions().colors[0],
        pointPlacement: 0.15,
        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],
        pointPlacement: -0.15,
        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}'
        }
    }

API参考：https://api.highcharts.com/highcharts/series.scatter.pointPlacement

实时演示：http://jsfiddle.net/BlackLabel/f2z9tLrs/

尝试使用highcharts.js将散点图覆盖在组合箱图上

1 个答案: