Question

我的叠加高图图表存在一些问题：

$('#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（我选择了一个小容器大小来显示像素差异）。

蓝色图形没有上边框（可以通过插入全零的第三个系列来修复）
蓝色图的中间列与右列重叠，如果容器宽度为（3n + 1）px（n为任意整数）
如果容器高度具有偶数个像素，则中间列的红色部分的高度比蓝色部分小1px

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

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

Answer 1

边框与网格线或轴线重叠，这是
这是问题https://github.com/highslide-software/highcharts.com/issues/2694。我们会调查一下。
这是舍入到最近的完整像素以渲染清晰图形的结果。

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

1 个答案: