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