尝试使用高图表在分组箱形图上叠加散点图.js

Question

我正在尝试使用高图表在分组箱形图上叠加散点图.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/