Highcharts Boxplots 如何获得五点摘要？

Question

我想使用 HighCharts 创建箱线图。正如我在 docs 中看到的那样，我需要已经为 Highcharts 提供所需的五点摘要，即最小值、最大值、q1、q3、用于创建箱线图的中值。

给定一个由数字组成的任意长度数组，如何有效地计算这五个数字？ JS 中有没有快速的方法来做到这一点？

Answer 1

尽管您有服务器端的解决方案，但我花了几分钟将我的 PHP 解决方案转换为 Javascript 解决方案，以解决最初的问题。

步骤 1) 计算百分位数的函数：

//get any percentile from an array
function getPercentile(data, percentile) {
    data.sort(numSort);
    var index = (percentile/100) * data.length;
    var result;
    if (Math.floor(index) == index) {
         result = (data[(index-1)] + data[index])/2;
    }
    else {
        result = data[Math.floor(index)];
    }
    return result;
}
//because .sort() doesn't sort numbers correctly
function numSort(a,b) { 
    return a - b; 
}

第 2 步）包装器获取最小值、最大值和每个所需的百分位数

//wrap the percentile calls in one method
function getBoxValues(data) {
    var boxValues = {};
    boxValues.low    = Math.min.apply(Math,data);
    boxValues.q1     = getPercentile(data, 25);
    boxValues.median = getPercentile(data, 50);
    boxValues.q3     = getPercentile(data, 75);
    boxValues.high   = Math.max.apply(Math,data);
    return boxValues;
}

步骤 3) 用它构建图表

示例：

http://jsfiddle.net/jlbriggs/pvq03hr8/

[[编辑]]

考虑异常值的快速更新：

http://jsfiddle.net/jlbriggs/db11fots/

Highcharts Boxplots 如何获得五点摘要？

Highcharts Boxplots How to get five point summary?

javascript

boxplot

highcharts