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

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

1 个答案: