Javascript Highcharts.js：堆叠图形的奇怪渲染

我的堆叠高图表有一些问题：

$('#container').highcharts(
  chart:
    type: 'column'
  credits:
    enabled: false
  title:
    text: ''
  xAxis:
    lineColor: '#afafaf'
    lineWidth: 1
    tickWidth: 0
    labels:
      enabled: false
    opposite: true
  yAxis:
    min: 0
    max: 4
    gridLineWidth: 0
    lineWidth: 0
    labels:
      enabled: false
    title:
      text: ''
    reversed: true
  legend:
    enabled: false
  tooltip:
    enabled: false
  plotOptions:
    column:
      borderWidth: 1
      borderColor: '#FFFFFF'
      pointPadding: 0
      groupPadding: 0
      animation: false
      stacking: 'normal'
      dataLabels:
        enabled: false
  series: [
      color: '#FF0000' # red
      data: [1,2,3]
    ,
      color: '#0000FF' # blue
      data: [0,2,1]
  ]
)

图形被篡改了（我选择了一个小容器大小来显示像素差异）

蓝色图形没有上边框（这可以通过插入第三个全零系列来修复）

若容器宽度为（3n+1）px（n为任意整数），则蓝色图形的中间列与右列重叠

如果容器高度的像素数为偶数，则中间列的红色部分的高度比蓝色部分小1倍

我的解决方法非常难看，特别是对于（2），因为有问题的容器宽度取决于列的数量，在我的应用程序中可能会有所不同

有什么想法吗？这些是highcharts.js中的错误还是我在highcharts配置中做错了什么

边界与轴线或轴线重叠，这是预期的

这是个问题。我们会调查的

这是舍入到最近的完整像素以渲染清晰图形的结果

---

关于（1）：是否真的打算让蓝色图形接触轴，而红色图形不接触轴？是的，您看到的白线是零点的边界