Highcharts tickInterval 每小时

Question

我正在尝试将按列分组的数据显示为多个系列。主要有3个要求：

图表必须以 fromDate
每小时应该有一个'tick'
toDate 很灵活

到目前为止，tickInterval 似乎非常依赖于提供的数据，而 Highchart 在某些情况下会忽略它，例如下面的情况。有没有办法让它在我的场景中放置刻度？是否可以在没有数据的情况下添加刻度？

    $('#container').highcharts({
    global: {
        useUTC: false
    },
    chart: {
            zoomType: false,
            type: 'column'
        },
    xAxis: {
        type: 'datetime',
        ordinal: false,
        startOnTick: false,
        endOnTick: false,
        minPadding: 0,
        maxPadding: 0,
        tickInterval: 3600 * 1000,
        minTickInterval: 3600 * 1000
    },

    plotOptions: {
        column: {
            stacking: 'normal',
            column: {
                pointPadding: 0,
                borderWidth: 0,
                grouping: true
            }
        }
    },
    series: [{"name":"One","data":[[1.424304e+12,1],[1.4243076e+12,2],[1.4243148e+12,1],[1.4243301e+12,1],[1.4243364e+12,1],[1.4243436e+12,1],[1.4243472e+12,1],[1.4243526e+12,1],[1.4243535e+12,1],[1.4243544e+12,1],[1.4243625e+12,1],[1.4243652e+12,2],[1.424367e+12,1],[1.4243688e+12,8],[1.4243724e+12,3],[1.4243733e+12,1],[1.424376e+12,8],[1.4243814e+12,3],[1.4243841e+12,1]]},{"name":"Two","data":[[1.424304e+12,1],[1.4243112e+12,1],[1.4243292e+12,1],[1.4243436e+12,1],[1.4243616e+12,1],[1.4243652e+12,3],[1.4243724e+12,1],[1.4243868e+12,1]]},{"name":"Seven","data":[[1.4243706e+12,1],[1.4243814e+12,1]]}]
});

Link 到 Fiddle

Answer 1

官方演示：http://www.highcharts.com/demo/dynamic-update.

也许我的示例会对您有所帮助。接下来的逻辑是：1) 发送 ajax 以每分钟检索一次数据（60 个元素） 2) 从该列表中推送一个元素到系列 3) 因此图表每秒更新一次。

function getLoadApp(){
    var d;
    var ar=[];
    for(var i=0; i<60; i++){
        ar[i] = 0;
    }

    $.ajax({
        type: "POST",
        url: "./dashboard",
        async: false,
        data: {
            ajax: true,
            oper: "loadapp"
        },
        success: function(data) {
            d = jQuery.parseJSON(data);
            for(var i=0; i<d.length; i++){
                ar[Number(d[i].SEC)] = Number(d[i].COUNT); 
            }
            loadappOneMin = loadappOneMin.concat(ar);
        }
    });
}

getLoadApp();
    $('#loadapp').highcharts({
        lang: {
            noData : "На данный момент данные отсутствуют"
        },
        chart: {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            borderWidth: 1,
            borderRadius: 4,
            borderColor: '#E8E8E8',
            events: {
                load: function() {
                    // set up the updating of the chart each second
                    var series = this.series[0];

                    //каждую сек выталкиваем 1ый из списка
                    setInterval(function() {
                        loadappOneSec = loadappOneMin.shift();
                        if(! loadappOneSec){
                                loadappOneSec = 0;
                        };
                        d = new Date();
                        var x = d.getTime();
                        series.addPoint([x, loadappOneSec], true, true);
                    }, timeInterval);
                    //каждую мин обн.-ем список
                    setInterval('getLoadApp()', 60*timeInterval);    
                }
            }
        },
        title: {
            text: 'ПТК АЦСК'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: pixelInterval
        },
        yAxis: {
            min: 0,
            title: {
                text: 'запросов/сек.'
            },
            plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
        },
        tooltip: {
            formatter: function() {
                return  Highcharts.numberFormat(this.y, 0);
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        plotOptions: {
            area: {
                pointStart: 0,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
                data: (function() {
                    var data = [], time = (new Date()).getTime(), i;
                    for (i = -19; i <= 0; i++) {
                        data.push({
                            x: time + i * 1000,
                            y: loadappOneSec
                        });
                    }
                    return data;
                })()
            }]
    });

Answer 2

点之间的间隔不规则，因此 Highcharts 无法真正计算出点之间的正确距离。这会导致 xAxis 上的间隔出现问题 - 解决方法是将 pointRange 例如设置为 1/10 小时：jsfiddle.net/qn6romsf/7 - 如果你无法设置 pointRange，则尝试使用tickPositioner.

Highcharts tickInterval 每小时

Highcharts tickInterval every hour

javascript

jquery

highcharts