如何解决Highcharts直方图最后两个分箱合并显示异常问题

异常表现 #

• 测试数组包含0到10的连续整数取值，其中9出现3次、10出现4次
• 按照binWidth: 1配置生成直方图时，9和10的频次被合并到同一个柱体中，柱体标签统一显示为9，没有独立展示10对应的柱体

问题原因 #

Highcharts 直方图默认的分箱规则是左闭右开区间，也就是每个分箱的匹配范围是[分箱起始值, 分箱结束值)，仅会统计落在左边界、且小于右边界的数值。
如果不手动指定分箱的结束范围，Highcharts会自动取数据集的最大值作为最后一个分箱的右边界。在这个场景下，数据集最大值是10，自动计算出来的所有分箱区间依次是[0,1)、[1,2)、[2,3)…[9,10)：

• 所有取值为9的元素可以正常被[9,10)这个分箱捕获
• 取值为10的元素恰好等于最后一个分箱的右边界，不符合左闭右开的匹配规则，没有独立的分箱承接，最终会被系统自动归入前一个[9,10)分箱，就出现了两类值计数合并、标签错误标注为9的异常。

修复方式 #

方式1：手动指定分箱的计算范围 #

在直方图的配置项中补充binStart和binEnd参数，让分箱的计算范围完整覆盖所有数据取值，确保每个整数都能匹配到独立的分箱区间，修改后的直方图配置如下：

plotOptions: {
  series: {
    borderWidth: 0,
    pointPlacement: 'between',
    dataLabels: {
      enabled: true
    },
  },
  histogram: {
    binWidth: 1,
    binStart: 0, // 指定第一个分箱的起始值
    binEnd: 11   // 指定最后一个分箱的结束值
  }
}

修改后生成的分箱区间为[0,1)、[1,2)…[10,11)，每个整数取值都能对应到独立的分箱，不会再出现合并问题。

方式2：调整绑定x轴的极值 #

如果不想手动指定分箱参数，可以在直方图绑定的x轴上手动设置max值，比数据最大值大1（本场景数据最大值为10，设置max为11即可），让Highcharts自动计算分箱时把右边界延伸到11，修改对应的x轴配置：

xAxis: [
  { visible: false },
  {
    title: { 
      text: 'test x',
      style:{ fontWeight: "bold" }
    },
    showLastLabel: true,
    max: 11 // 设置x轴最大值
  }
]

修复效果 #

调整完成后，图表会生成11个独立柱体，分别对应0到10的每个取值：

• 取值9对应的柱体计数为3，标签标注为9
• 取值10对应的柱体计数为4，标签标注为10
  完全符合预期的展示效果。

内容的提问来源于stack exchange，提问作者Vlovlo