1

Highchartsでバグを見つけたと思います-それが私のコードである可能性がわかりません（しかし、それについて間違っていたのは初めてではありません！（jsfiddleリンクは以下にあります）。これは深刻な場合があります。問題は、場合によっては、誤った位置が「チャートから外れる」可能性があり、ヘルスケア分野に深刻な影響を与える可能性があるためです。

それを表示する最も簡単なケース：日時x軸上の2点スプラインと単一の垂直バー。2番目の垂直バーが追加されたが、データが空の場合、元のバーの位置が誤ってオフセットされます。（簡単にするために、私の例では、垂直バーとスプラインの終点に同じ日時を使用していますが、これは問題を確認するために必要ではありません。）最新のものを含むさまざまなバージョンのHighchartsでこれを再現しました3.0.0。

jsfiddleの例では、2番目の垂直バーをコメントアウトしており、正しく表示されます。その部分のコメントを外すだけで、誤ったオフセットが表示されます。2番目の垂直バーのデータが空でない場合、最初の垂直バーが再び正しく表示されます。

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

1 に答える 1

1

まず、最新バージョン（この場合は3.0）を使用していることを確認します。次に、plotOptions.columnにオプションがありますgrouping。一般に、より多くの列を使用する場合は、互いに重ならないように、少し翻訳されます。グループ化オプションは、その動作を削除するように設計されています。

例を参照してください：http：//jsfiddle.net/Fusher/8vdkf/2/

        plotOptions: {
            column: {
                grouping: false
            }
        },
于 2013-03-26T15:16:01.517 に答える