Highcharts將平均線添加到BoxPlot圖表

Question

是否有方法可以在BoxPlot圖表中添加另一條線來表示平均值（平均值）？這看起來像中線將在下面搗鼓

在自動繪製你

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}' 
     } 
    }] 

}); 

我不是在文檔看到如何做到這一點？這可能嗎？

此外，在示例中，當您懸停boxplot的任何部分時，工具提示彈出。 當鼠標懸停中間或其中一個四分位數時，是否有方法顯示工具提示，以便它只顯示數據點的信息？
我在想這與散點圖系列工具提示如何顯示單個點的數據相似。

---

編輯：
我終於得到了我周圍的語法頭在點對象，而不是值的每個數據集的數組傳遞。獲得該對象語法正確後，我爲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/>' 
     } 
    } 

這幾乎是我想要的東西，但理想的，我想看到每個數據集就像median線是框中顯示的mean線。

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) 

附加：

由於前兩種方法（pointArrayMap和toYData），它將與您以前的格式[x, y1, y2, y3, y4, y5, y6]一起工作，當然如果y6 =平均值：http://jsfiddle.net/tLucL6mq/7/