Highcharts добавить среднюю строку в диаграмму BoxPlot

Question

Есть ли способ добавить еще одну строку в панель на диаграмме BoxPlot, которая будет представлять среднюю (Средняя)? Это будет выглядеть как срединная линия, которая автоматически обращается к вам в ниже Fiddle

http://jsfiddle.net/tLucL6mq/3/
код скрипку:

$('#container').highcharts({ 

    chart: { 
     type: 'boxplot', 
     inverted: true 
    }, 

    title: { 
     text: 'Sample Base Salary Range' 
    }, 

    legend: { 
     enabled: false 
    }, 

    xAxis: { 
     categories: ['4', '3', '2', '1', '0'], 
     title: { 
      text: 'Job Level' 
     } 
    }, 

    yAxis: { 
     title: { 
      text: 'Base Salary' 
     } 
    }, 

    plotOptions: { 
     boxplot: { 
      fillColor: '#F0F0E0', 
      lineWidth: 2, 
      medianColor: '#0C5DA5', 
      medianWidth: 3 
     } 
    }, 

    series: [{ 
     name: "Observation Data", 
     data: [ 
      ['0', 68, 75, 79, 82, 84, 89], //level 4 - category 0 
      ['1', 53, 63, 68, 72, 75, 79], //level 3 - category 1 
      ['2', 47, 52, 59, 64, 67, 68], //level 2 - category 2 
      ['3', 35, 37, 39, 42, 46, 51], //level 1 - category 3 
      ['4', 32, 33, 34, 38, 40, 45] //level 0 - category 4 
     ], 
     tooltip: { 
      headerFormat: '<b>{point.series.name}</b><br/><em>Job Level: {point.x}</em><br/>', 
      pointFormat: '- Max: {point.high}<br/>' + 
          '- Q3: {point.q3}<br/>' + 
          '- Median: {point.median}<br/>' + 
          '- Q1: {point.q1}<br/>' + 
          '- Min: {point.low}<br/>' 
     } 
    }, { 
     name: "Outlier Data", 
     color: Highcharts.getOptions().colors[0], 
     type: 'scatter', 
     data: [ // x, y positions where 0 is the first category 
      [0, 74], 
      [1, 67], 
      [4, 40], 
      [4, 48] 
     ], 
     marker: { 
      fillColor: 'yellow', 
      lineWidth: 2, 
      lineColor: '#0C5DA5' 
     }, 
     tooltip: { 
      headerFormat: '<b>{point.series.name}</b><br/><em>Job Level: {point.x}</em><br/>', 
      pointFormat: 'Base Salary: {point.y}' 
     } 
    }] 

}); 

Я не вижу в документации, как это сделать ... Это вообще возможно?

Кроме того, в примере, когда вы навешиваете какую-либо часть ящика, всплывает всплывающая подсказка. Есть ли способ показать всплывающую подсказку, когда вы наведете медианную или одну из Quartiles, чтобы она отображала только информацию о точке данных?
Я думаю, что это будет похоже на то, как всплывающая подсказка для серии рассеяния показывает данные для отдельных точек.

---

Edit:
я, наконец, получил мою голову вокруг синтаксиса перейти в точечных объектов вместо массива значений для каждого набора данных. После правильного ввода этого синтаксиса объекта я добавил новое свойство для mean и включил это значение в всплывающую подсказку.

http://jsfiddle.net/tLucL6mq/4/

series: [{ 
     name: "Observation Data", 
     data: [ 
{x: '0', low: 68, q1: 75, median: 79, q3: 82, high: 84, mean: 77.6}, //level 4 - category 0 
{x: '1', low: 53, q1: 63, median: 68, q3: 72, high: 75, mean: 66.2}, //level 3 - category 1 
{x: '2', low: 47, q1: 52, median: 59, q3: 64, high: 67, mean: 57.8}, //level 2 - category 2 
{x: '3', low: 35, q1: 37, median: 39, q3: 42, high: 46, mean: 39.8}, //level 1 - category 3 
{x: '4', low: 32, q1: 33, median: 34, q3: 38, high: 40, mean: 35.4} //level 0 - category 4 
     ], 
     tooltip: { 
      headerFormat: '<b>{point.series.name}</b><br/><em>Job Level: {point.x}</em><br/>', 
      pointFormat: '- Min: {point.low}<br/>' + 
          '- Q1: {point.q1}<br/>' + 
          '- Median: {point.median}<br/>' + 
          '- Q3: {point.q3}<br/>' + 
          '- Max: {point.high}<br/>' + 
          '- Mean: {point.mean}<br/>' 
     } 
    } 

Это почти то, что я хотел, но в идеале, я хотел бы видеть mean строку, отображаемую на поле для каждого набора данных так же, как median линия.

Answer 1

В общем, это не поддерживается, чтобы добавить такую ​​строку, но это Highcharts, так что вы можете расширить функции по умолчанию: http://jsfiddle.net/tLucL6mq/5/;)

Простой фрагмент:

(function (H) { 

    // when changing point format for boxplot, values will calculate automatically 
    H.seriesTypes.boxplot.prototype.pointArrayMap = ['low', 'q1', 'median', 'q3', 'high', 'mean']; 

    H.seriesTypes.boxplot.prototype.toYData = function (point) { 
     return [point.low, point.q1, point.median, point.q3, point.high, point.mean]; 
    }; 

    // draw lines after default drawPoints is called: 
    H.wrap(H.seriesTypes.boxplot.prototype, 'drawPoints', function (p) { 
     p.call(this); 
     var chart = this.chart, 
      r = chart.renderer, 
      xAxis = this.xAxis, 
      yAxis = this.yAxis, 
      x, y; 

     // for each point, draw line: 
     H.each(this.points, function (p, i) { 
      x = p.shapeArgs.x; 
      y = p.meanPlot; 

      if (p.meanPlotX) { 
       // update existing path: 
       p.meanPlotX.attr({ 
        d: ['M', x, y, 'L', x + p.shapeArgs.width, y] 
       }); 
      } else { 
       // create mean-line for the first time 
       p.meanPlotX = r.path(['M', x, y, 'L', x + p.shapeArgs.width, y]).attr({ 
        stroke: 'black', 
         'stroke-width': 2 
       }).add(p.series.group); 
      } 

     }); 
    }); 
})(Highcharts) 

Extra:

Он будет работать с вашим предыдущим форматом [x, y1, y2, y3, y4, y5, y6] из-за первых двух методов (pointArrayMap и toYData), конечно, в случае y6 = mean: http://jsfiddle.net/tLucL6mq/7/