Highcharts Boxplot - 当最小值和最大值不属于某个类别时，不显示具有下四分位数、上四分位数和中位数的框

Question

导航至下方 fiddle，发现第一个类别未显示箱线图。我的期望是 highcharts 应该显示 q1、q3 和中值框。有没有办法在没有最小值和最大值的情况下渲染箱线图？

https://jsfiddle.net/rammohanreddy201/ga20p14y/28/

Highcharts.chart('container', {

chart: {
    type: 'boxplot'
},

title: {
    text: 'Highcharts Box Plot Example'
},

legend: {
    enabled: false
},

xAxis: {
    categories: ['1', '2', '3', '4', '5'],
    title: {
        text: 'Experiment No.'
    }
},

yAxis: {
    title: {
        text: 'Observations'
    },
    plotLines: [{
        value: 932,
        color: 'red',
        width: 1,
        label: {
            text: 'Theoretical mean: 932',
            align: 'center',
            style: {
                color: 'gray'
            }
        }
    }]
},

series: [{
    name: 'Observations',
    data: [
        [null, 801, 848, 895, null],
        [733, 853, 939, 980, 1080],
        [714, 762, 817, 870, 918],
        [724, 802, 806, 871, 950],
        [834, 836, 864, 882, 910]
    ],
    tooltip: {
        headerFormat: '<em>Experiment No {point.key}</em><br/>'
    }
}, {
    name: 'Outliers',
    color: Highcharts.getOptions().colors[0],
    type: 'scatter',
    data: [ // x, y positions where 0 is the first category
        [0, 644],
        [4, 718],
        [4, 951],
        [4, 969]
    ],
    marker: {
        fillColor: 'white',
        lineWidth: 1,
        lineColor: Highcharts.getOptions().colors[0]
    },
    tooltip: {
        pointFormat: 'Observation: {point.y}'
    }
}]

});

Answer 1

boxplot 系列的实现逻辑需要数组或数据配置对象中的 6 或 5 个值 - x,low,q1,median,q3,high。更多：https://api.highcharts.com/highcharts/series.boxplot.data and https://www.highcharts.com/docs/chart-and-series-types/box-plot-series

但是，将 low 和 high 设置为与 q1 相同的值使得它们的线是不可见的（被 q1 线覆盖），因此它可能是满足您要求的一个很好的解决方法。所以数据配置应该是这样的：

data: [
  [801, 801, 848, 895, 801],
  [733, 853, 939, 980, 1080],
  [714, 762, 817, 870, 918],
  [724, 802, 806, 871, 950],
  [834, 836, 864, 882, 910]
],

接下来最好在工具提示中隐藏这些值。我们可以使用formatter回调来实现：

  tooltip: {
    formatter(tooltip) {
      let point = this.point;
      if (point.low === point.q1 || point.high === point.q1) {
        point.low = null;
        point.high = null;
      }
      return tooltip.defaultFormatter.call(this, tooltip);
    }
  },

演示：https://jsfiddle.net/BlackLabel/rd4aLgne/

API: https://api.highcharts.com/highcharts/tooltip.formatter

Highcharts Boxplot - 当最小值和最大值不属于某个类别时，不显示具有下四分位数、上四分位数和中位数的框

Highcharts Boxplot - box with lower, upper quartile and median is not displaying when min and max are null of a category

highcharts

angular-highcharts