javascript 高值图中的箱形图显示不正确的高值和中值

rn0zuynd  于 2023-01-11  发布在  Java
关注(0)|答案(1)|浏览(144)

我正在根据一系列简单的数据创建箱形图:

var box_plot = Highcharts.chart(container, {

        chart: {
            type: 'boxplot'
        },

        title: {
            text: chart_title
        },

        legend: {
            enabled: false
        },
        series: [{
            name: 'Observations',
            data: [
                [1,2,3,4,5,6,7,8,9,10,11,12,13]
            ],
            tooltip: {
                headerFormat: '<em>Experiment No {point.key}</em><br/>'
            }
        }]      
    });
    return box_plot;

但在生成箱线图时,上限显示为6,中位数显示为4。在数据中,上限为13,中位数为6。
请告知我做错了什么。代码截图和箱形图附后。
谢谢

ajsxfq5m

ajsxfq5m1#

您可以通过两种方式向箱形图系列提供数据:
1.具有6个或5个值的数组的数组。在本例中,这些值对应于x,low,q1,median,q3,high。如果第一个值是字符串,则将其应用为点的名称,并推断x值。也可以省略x值,在这种情况下,内部数组的长度应为5。然后,将自动计算x值。从0开始并递增1,或者从序列选项中给定的pointStart和pointInterval开始。

data: [
  [0, 3, 0, 10, 3, 5],
  [1, 7, 8, 7, 2, 9],
  [2, 6, 9, 5, 1, 3]
]

1.具有命名值的对象数组。以下代码段仅显示了几个设置,请参阅下面的完整选项集。如果数据点总数超过序列的turboThreshold,则此选项不可用。

data: [{
  x: 1,
  low: 4,
  q1: 9,
  median: 9,
  q3: 1,
  high: 10,
  name: "Point2",
  color: "#00FF00"
}, {
  x: 1,
  low: 5,
  q1: 7,
  median: 3,
  q3: 6,
  high: 2,
  name: "Point1",
  color: "#FF00FF"
}]

Highcharts没有任何自动计算数据的过程,您需要自己准备所需的数据结构,例如:

const data = [
  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
];

const processedData = data.map((dataEl, index) => ({
  x: index,
  low: Math.min(...dataEl),
  median: dataEl[(dataEl.length - 1) / 2],
  high: Math.max(...dataEl),
  ...
}));

实时演示:http://jsfiddle.net/BlackLabel/eqz4851x/
API参考:https://api.highcharts.com/highcharts/series.boxplot.data

相关问题