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 
    }]