Highcharts: incorrect column placement with linked series?

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/29415953/highcharts-incorrect-column-placement-with-linked-series

标签

Highcharts