javascript - Highcharts.js : Strange rendering of stacked graph

Question

我的堆叠 highcharts 图表有一些问题:

$('#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]
  ]
)

图表被篡改here (我选择了较小的容器尺寸来显示像素差异)。

1. 蓝色图表没有上边框(这可以通过插入全零的第三个系列来修复)

2. 如果容器宽度为 (3n+1)px(n 为任意整数)，则蓝色图表的中间列与右列重叠

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

我的解决方法非常丑陋，特别是对于(2)，因为有问题的容器宽度取决于列数，这在我的应用程序中可能会有所不同。

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

Answer 1

1. 边框与网格线或轴线重叠，这是有意的
2. 这是问题 https://github.com/highslide-software/highcharts.com/issues/2694 。我们会调查此事。
3. 这是为了渲染清晰的图形而舍入到最接近的完整像素的结果。