Средние маркеры в боксплоте с несколькими сериями

Question

У меня есть боксплот с несколькими сериями. Я хочу добавить средний маркер на поле. С одной серией я могу использовать разброс, чтобы нарисовать среднее на верхней части бокса. С несколькими сериями средства оказываются в центре группы.

Как лучше всего расположить точки в нужном месте? Бонусные баллы за добавление среднего значения к всплывающей подсказке для коробочного графика.

Модифицировано из стандартного примера:

  Highcharts.chart('container', {

  chart: {
    type: 'boxplot'
  },

  title: {
    text: 'Highcharts Box Plot Example'
  },

  legend: {
    enabled: false
  },

  xAxis: {
    categories: ['1', '2', '3', '4', '5'],
    title: {
      text: 'Experiment No.'
    }
  },

  yAxis: {
    title: {
      text: 'Observations'
    }

  },

  series: [{
      name: 'S1',
      data: [
        [755, 811, 838, 885, 955],
        [725, 863, 930, 980, 1050],
        [704, 752, 827, 870, 915],
        [714, 812, 825, 871, 945],
        [780, 826, 852, 882, 950]
      ],
      tooltip: {
        headerFormat: '<em>Experiment No {point.key}</em><br/>'
      }
    },
    {
      name: 'S2',
      data: [
        [760, 801, 848, 895, 965],
        [733, 853, 939, 980, 1080],
        [714, 762, 817, 870, 918],
        [724, 802, 816, 871, 950],
        [775, 836, 864, 882, 970]
      ],
      tooltip: {
        headerFormat: '<em>Experiment No {point.key}</em><br/>'
      }
    },
    {
      name: 'Means 1',
      color: Highcharts.getOptions().colors[0],
      type: 'scatter',
      data: [ // x, y positions where 0 is the first category
        [0, 850],
        [1, 935],
        [2, 825],
        [3, 840],
        [4, 850]
      ],
      marker: {
        fillColor: Highcharts.getOptions().colors[0],
        symbol: 'diamond',
        lineWidth: 1,
        lineColor: Highcharts.getOptions().colors[0]
      },
      tooltip: {
        pointFormat: 'Mean: {point.y}'
      }
    },
    {
      name: 'Means 2',
      color: Highcharts.getOptions().colors[1],
      type: 'scatter',
      data: [ // x, y positions where 0 is the first category
        [0, 860],
        [1, 945],
        [2, 805],
        [3, 850],
        [4, 860]
      ],
      marker: {
        fillColor: Highcharts.getOptions().colors[1],
        symbol: 'diamond',
        lineWidth: 1,
        lineColor: Highcharts.getOptions().colors[1]
      },
      tooltip: {
        pointFormat: 'Mean: {point.y}'
      }
    }
  ]

});

Создание этого:

Answer 1

Самое простое решение:

• отключить grouping
• определить позиции точек, задав x значения в виде десятичных чисел
• определить размер поля на pointPadding
• вместо scatter использовать line серии с lineWidth: 0 (для правильной работы общей подсказки)
• включить общую подсказку

---

tooltip: {
  shared: true
},
plotOptions: {
  series: {
    grouping: false,
    pointRange: 1,
    pointPadding: 0.4,
    groupPadding: 0,
    states: {
      hover: {
        lineWidthPlus: 0
      }
    }
  }
},

series: [{
    data: [
      [-0.2, 755, 811, 838, 885, 955],
      [0.8, 725, 863, 930, 980, 1050],
      [1.8, 704, 752, 827, 870, 915],
      [2.8, 714, 812, 825, 871, 945],
      [3.8, 780, 826, 852, 882, 950]
    ],
    ...
  },
  {
    data: [
      [0.2, 760, 801, 848, 895, 965],
      [1.2, 733, 853, 939, 980, 1080],
      [2.2, 714, 762, 817, 870, 918],
      [3.2, 724, 802, 816, 871, 950],
      [4.2, 775, 836, 864, 882, 970]
    ],
    ...
  },
  {
    type: 'line',
    lineWidth: 0,
    data: [ // x, y positions where 0 is the first category
      [-0.2, 850],
      [0.8, 935],
      [1.8, 825],
      [2.8, 840],
      [3.8, 850]
    ],
    ...
  },
  {
    type: 'line',
    lineWidth: 0,
    data: [
      [0.2, 860],
      [1.2, 945],
      [2.2, 805],
      [3.2, 850],
      [4.2, 860]
    ],
    ...
  }
]

---

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6m4e8x0y/4947/

Справочник по API:

https://api.highcharts.com/highcharts/series.line.states.hover.lineWidthPlus

https://api.highcharts.com/highcharts/series.boxplot.grouping

https://api.highcharts.com/highcharts/tooltip.shared