javascript - Highcharts 向 BoxPlot 图表添加一条平均线

Question

有没有办法在 BoxPlot 图表的条形图中添加另一条线来表示均值(平均值)？这看起来像下面自动为您绘制的中值线 fiddle

http://jsfiddle.net/tLucL6mq/3/
fiddle 代码:

$('#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}'
        }
    }]

});

我没有在文档中看到如何执行此操作...这可能吗？

此外，在示例中，当您将鼠标悬停在箱线图的任何部分时，会弹出工具提示。 有没有办法在您悬停中位数或四分之一时显示工具提示，以便它只显示该数据点的信息？
我认为这类似于散点图系列的工具提示如何显示各个点的数据。

---

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

额外:

由于前两个方法(pointArrayMap 和 toYData)，当然是在 y6=mean 的情况下:http://jsfiddle.net/tLucL6mq/7/