Highcharts tick每小时间隔一次

Highcharts tickInterval every hour

本文关键字：一次 tick 每小时小时间 Highcharts 更新时间：2024-01-15

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

图形必须以fromDate开始（X轴上的零点）
每小时应该有一个"刻度"
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]]}]
});

Fiddle 的链接

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

官方演示：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;
                })()
            }]
    });