Highcharts / Highstock跳跃标签

时间:2014-02-23 11:16:36

标签: javascript jquery highcharts highstock

我试图使用Highstock中的柱形图在时间轴上表示多系列事件。出于某种原因,x-Axis上的标签在滚动数据时不断跳跃:

滚动之前(注释标签“2014年2月”附在短栏中): Prior to scroll (note label "Feb 2014" is attached to short column)

滚动后(标签“2014年2月”跳转到另一列): After scroll (label "Feb 2014" has jumped to a different column)

jsFiddle:jsFiddle Example

Highcharts.stockChart配置:

chart = new Highcharts.StockChart({
    chart: {
        alignTicks: true,
        animation: true,
        backgroundColor: '#fff',
        events: {
            load: function (e) {
                this.xAxis[0].setExtremes(1398859200000, 1414753200000);
            }
        },
        ignoreHiddenSeries: true,
        renderTo: $('#chart')[0]
    },
    colors: [
        '#89f1a4',
        '#68d9f7',
        '#9eb9ef',
        '#c49eef'
    ],
    credits: {
        enabled: false
    },
    legend: {
        align: 'center',
        borderWidth: 0,
        enabled: true,
        navigation: {
            animation: true
        },
        shadow: false,
        verticalAlign: 'top'
    },
    rangeSelector: {
        enabled: false
    },
    scrollbar: {
        enabled: false
    },
    title: {
        text: ''
    },
    tooltip: {
        crosshairs: false,
        shared: true
    },
    navigator: {
        height: 40,
        margin: 10,
        maskFill: 'rgba(233, 233, 233, 0.7)',
        outlineWidth: 0,
        series: {
            type: 'column',
            stacking: 'normal',
            dataGrouping: {
                enabled: true,
                forced: true,
                units: [[
                    'week',
                    [1]
                ]]
            }
        }
    },
    plotOptions: {
        series: {
            showInLegend: true,
            stacking: 'normal',
            dataGrouping: {
                enabled: true,
                forced: true,
                units: [[
                    'week',
                    [1]
                ]]
            }
        }
    },
    yAxis: {
        gridLineWidth: 0,
        labels: {
            enabled: false
        },
        max: 24,
        min: 0,
        ordinal: false
    },
    xAxis: {
        dateTimeLabelFormats: {
            millisecond: '%H:%M:%S.%L',
            second: '%H:%M:%S',
            minute: '%H:%M',
            hour: '%H:%M',
            day: '%e. %b',
            week: '%b %Y',
            month: '%b %Y',
            year: '%Y'
        },
        labels: {
            style: {
                color: '#ccc'
            }
        },
        minRange: 604800000,
        ordinal: false
    },
    series: data
});

我的问题:

有没有办法让标签与列对齐,因为图表是SCROLLED,只允许标签在调整VIEWING RANGE时重新排序/跳转(通过导航器)?

0 个答案:

没有答案