Highcharts 的竖线位置不正确

Question

我相信我在 Highcharts 中发现了一个错误——我看不出它怎么可能是我的代码（但这不是我第一次错了！（jsfiddle 链接如下）。这可以是一个严重的问题，因为在某些情况下，错误的位置可能会“超出图表”，这可能会在医疗保健领域产生严重影响！

显示它的最简单情况：日期时间 x 轴上的 2 点样条和单个垂直条。如果添加了第二个垂直条，但数据为空，则原始条的位置偏移不正确。 （为简单起见，在我的示例中，我对垂直条和样条曲线的终点使用相同的日期时间，但这不是看到问题所必需的。）我已经在不同版本的 Highcharts 中重现了这一点，包括最新的3.0.0.

在我的 jsfiddle 示例中，我注释掉了第二个竖线，并且显示正确；只需取消注释该部分即可查看不正确的偏移量。如果第二个垂直条的数据不为空，则第一个垂直条再次正确显示。

http://jsfiddle.net/ckapilla/8vdkf/

// 3/20/2003
var startDt = Date.UTC(2013, 3 - 1, 20, 0, 0, 0);
var stopDt = Date.UTC(2013, 3 - 1, 20, 11, 59, 59);

var date1 = Date.UTC(2013, 3 - 1, 20, 8, 0, 0);
var date2 = Date.UTC(2013, 3 - 1, 20, 11, 0, 0);

var yMaxBG = 400;
var yMaxIns = 30;

var emptyData = [];
var barData = [{
    x: date2,
    y: 24
}];

var splineData = [{
    x: date1,
    y: 49
}, {
    x: date2,
    y: 141
}];


var glycemicChart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },

    xAxis: {
        type: 'datetime',
        min: startDt,
        max: stopDt,
        dateTimeLabelFormats: {
            day: '%e-%b-%Y'
        },

        tickInterval: 24 * 3600 * 1000,
        gridLineWidth: 2,
        gridLineColor: '#a0a0a0',

        minorTickInterval: 3600 * 1000,
        minorGridLineWidth: 1,
        minorGridLineColor: '#d0d0d0'
    },
    yAxis: [{

        min: 50,
        max: 400,
        minorGridLineWidth: 0

    }, {
        min: 0,
        max: 30,
        alignTicks: false,
        opposite: true
    }],

    plotOptions: {
        pointInterval: 3600000 // one hour
    },

    series: [{
        name: 'spline',
        yAxis: 0,
        data: splineData

    },

            {
                name: 'Bar',
                type: 'column',
                yAxis: 1,
                pointWidth: 10,
                data: barData
            }
    /* un-comment the following to see incorrect offset */

    /******,

    {
    name: 'dummy',
    type: 'column',
    yAxis: 1,
    pointWidth: 10,
    data: emptyData
    }
    ********/
    ]
});

Answer 1

首先，确保您使用的是最新版本（在这种情况下为 3.0）。然后在 plotOptions.column 你有选项grouping。一般来说，当使用更多列时，它们会稍微翻译一下，以确保它们不会相互重叠。分组选项旨在消除该行为。

查看示例：http://jsfiddle.net/Fusher/8vdkf/2/

        plotOptions: {
            column: {
                grouping: false
            }
        },