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

Highcharts的垂直条位置不正确

1 个答案: