Я пытаюсь наложить точечный график на сгруппированный прямоугольный график, используя 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
Требуемое поведение для «выброса группы А», расположенного непосредственно над / под / над блоком «Наблюдения группы А». И для того, чтобы «выбросы группы B» были расположены непосредственно над / под / над полем «наблюдения группы B». Но теперь выбросы для обеих групп A и B разбросаны между двумя квадратами.
Спасибо за любую помощь, которую вы можете предложить!