我认为您需要设置 pointPlacement 根据你想要达到的范围值，在你的情况下： http：// jsfiddle.net/215tnLna/21/

因此，如果最高跨度将有 pointPlacement：x ，那么 pointRange 值较小的系列也应该减少 pointPlacement 。在你的情况下：

 系列：[{
 name：'1hr span'，
 type：'列'，
 data：[{
x：1428048000000，
y：8.4 
}，{
x：1428051600000，
y：9 
}，{
x：1428055200000，
y：8.1 
}，{
x：1428058800000，
y：6.6 
}，{
x：1428062400000，
y：5 
}]，
颜色：'＃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 
}]，
颜色：'＃22CC00'，
 linkedTo：'：previous'，
 pointRange： 3 * 36e5，
 pointPlacement：-0.5 / 2 
}，{
 name：'6hr span'，
 type：'column'，
 data：[{ 
x：1428127200000，
y：6.9 
}]，
颜色：'＃22CC00'，
 linkedTo：'：previous'，
 pointRange：6 * 36e5，
 pointPlacement：-0.5 
}] 
 

I'm trying to set up column chart with variable column widths. Having different column widths in a single series doesn't seem to be possible, so I've set up multiple series for each required width, and linked them.

But I've run into a problem, illustrated in the following:

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

I've set up the data so that there shouldn't be any gaps... and yet there are gaps in the above jsfiddle. Hover over each column to see the time for that column... the right-hand edge of the column should be placed at that time on the x axis (since pointPlacement is set to -0.5).

BUT the only column series that is aligned correctly, with right-hand edge at the indicated time, is the final one (with a 6 hour span). The first two are shifted left.

What am I doing wrong? Why is this happening, and how do I set this up so that all columns in the linked series are displayed at the correct position?

Thanks.

jsfiddle code:

$(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
    }]
});
});

I think you need to set pointPlacement value according to span you want to achieve, in your case: http://jsfiddle.net/215tnLna/21/

So if highest span will have pointPlacement: x, then series with lower value for the pointRange should have decreased pointPlacement too. In your case:

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