Highcharts在BoxPlot图表中添加Mean线

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

});

我没有在文档中看到如何做到这一点......这有可能吗？

此外,在示例中,当您将鼠标悬停在箱线图的任何部分时,工具提示会弹出. 有没有办法显示工具提示当你悬停Median或其中一个Quartiles时它只显示数据点的信息？
我认为这与散点图系列的工具提示如何显示各个点的数据类似.

---

编辑:
我终于绕过语法传递点对象而不是每个数据集的值数组.在获得该对象语法正确后,我为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)

额外:

[x, y1, y2, y3, y4, y5, y6]由于前两种方法(pointArrayMap和toYData),它将与您之前的格式一起使用,当然,如果y6 = mean:http://jsfiddle.net/tLucL6mq/7/