Question

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

图必须使用fromDate
应该有一个＆＃39; tick＆＃39;每小时
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

Answer 1

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

Answer 2

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

Highcharts tickInterval每小时一次

2 个答案: