Highcharts：链接系列的列位置不正确？

Question

我正在尝试设置可变列宽度的柱状图。在一个系列中有不同的列宽似乎不可能，所以我为每个需要的宽度设置了多个系列，并将它们链接起来。

但我碰到的一个问题，说明如下：

http://jsfiddle.net/drmrbrewer/215tnLna/15/

我已经设置了数据，这样，不应该有任何的差距......竟然有上述jsfiddle中的差距。将鼠标悬停在每列上以查看该列的时间......列的右侧边缘应该放置在x轴上（因为pointPlacement设置为-0.5）。

但是，在指定时间右边缘对齐的唯一一列系列是最后一个（6小时跨度）。前两个向左移动。

我在做什么错？为什么会发生这种情况，以及如何设置，以便链接系列中的所有列显示在正确的位置？

谢谢。

的jsfiddle代码：

$(function() { 
$('#container').highcharts({ 

    title: { 
     text: 'Variable width columns' 
    }, 
    xAxis: { 
     type: 'datetime', 
     tickInterval: 36e5, 
     labels: { 
      format: '{value:%H}' 
     } 
    }, 
    legend: { 
     enabled: false 
    }, 
    plotOptions: { 
     column: { 
      groupPadding: 0, 
      pointPadding: 0, 
      borderWidth: 0, 
      grouping: false, 
      pointPlacement: -0.5 
     } 
    }, 
    series: [{ 
     name: '1hr span', 
     type: 'column', 
     data: [{"x":1428048000000,"y":8.4},{"x":1428051600000,"y":9},{"x":1428055200000,"y":8.1},{"x":1428058800000,"y":6.6},{"x":1428062400000,"y":5}], 
     color: '#22CC00', 
     pointRange: 36e5 
    },{ 
     name: '3hr span', 
     type: 'column', 
     data: [{"x":1428073200000,"y":4.9},{"x":1428084000000,"y":4},{"x":1428094800000,"y":3.4},{"x":1428105600000,"y":2.4}], 
     color: '#22CC00', 
     linkedTo: ':previous', 
     pointRange: 3 * 36e5 
    },{ 
     name: '6hr span', 
     type: 'column', 
     data: [{"x":1428127200000,"y":6.9}], 
     color: '#22CC00', 
     linkedTo: ':previous', 
     pointRange: 6 * 36e5 
    }] 
}); 
}); 

Answer 1

我认为你需要设置pointPlacement根据价值跨越要实现，你的情况：http://jsfiddle.net/215tnLna/21/

所以，如果最高跨度将有pointPlacement: x，然后系列pointRange的较低值也应该减少pointPlacement。你的情况：

series: [{ 
     name: '1hr span', 
     type: 'column', 
     data: [{ 
      "x": 1428048000000, 
      "y": 8.4 
     }, { 
      "x": 1428051600000, 
      "y": 9 
     }, { 
      "x": 1428055200000, 
      "y": 8.1 
     }, { 
      "x": 1428058800000, 
      "y": 6.6 
     }, { 
      "x": 1428062400000, 
      "y": 5 
     }], 
     color: '#22CC00', 
     pointPlacement: -0.5/6, 
     pointRange: 36e5 
    }, { 
     name: '3hr span', 
     type: 'column', 
     data: [{ 
      "x": 1428073200000, 
      "y": 4.9 
     }, { 
      "x": 1428084000000, 
      "y": 4 
     }, { 
      "x": 1428094800000, 
      "y": 3.4 
     }, { 
      "x": 1428105600000, 
      "y": 2.4 
     }], 
     color: '#22CC00', 
     linkedTo: ':previous', 
     pointRange: 3 * 36e5, 
     pointPlacement: -0.5/2 
    }, { 
     name: '6hr span', 
     type: 'column', 
     data: [{ 
      "x": 1428127200000, 
      "y": 6.9 
     }], 
     color: '#22CC00', 
     linkedTo: ':previous', 
     pointRange: 6 * 36e5, 
     pointPlacement: -0.5 
    }]