浮动图不适用于时间和计数

Question

您好，我需要创建一个流动图。为此我正在使用这个插件http://people.iola.dk/olau/flot/API.txt。

我需要在 x 轴上显示时间 (h:m) 并在 y 轴上计数。为此，我编写了这种脚本。但它不起作用。任何人都可以帮助我。

var运行=假； 变量数组； 变量 xscale = 10;

//this function does the plotting 
function draw() {
    var timearr = getTimeArray();
    this.array=timearr;
    var sTime ="";
    var oDate = new Date();
    var sTimestamp ="";
    var exparr = "";
    for (var l = 0; l < 10; l++) {
        sTime = this.array[l][1];
        oDate.setUTCHours(
            parseInt(sTime.substr(0, 2), 10),
            parseInt(sTime.substr(3, 2), 10),
            0,
            0
        );
        sTimestamp = oDate.getTime();
        this.array[l]=[parseInt(l),parseInt(sTimestamp)];
    }
    $.plot(
        $("#graphdiv"),[
            {
                label: "Logged In",
                data: this.array,
                lines: { show: true, fill: true, fillColor: "rgba(249, 28, 61,0.3)",lineWidth: 2.5 },
                //color:"rgba(249, 28, 61, 1)"
                color:0
            }         
        ],
        {
        xaxis: {
            ticks: getTimeArray(1),
            mode: "time",
            timeformat: "%H:%M"

        },
        yaxis: {
            ticks: [0 , 1, 2, 3,4,5, 6,7,8,9,10],
            min: 0,
            tickDecimals: 0
        },            
        grid: {
            show: true,
            color: '#474747',
            tickColor: '#474747',
            borderWidth: 2,
            autoHighlight: true,
            mouseActiveRadius: 2
        }
    });
}

function getTimeArray(flg)
{
    array = [];
    var d = new Date();
    var hour='';
    var minute='';
    var timeString ='';

    for (var i = 9; i >= 0; i--){
        if(i<9)d = new Date( d.getTime() - 5*60*1000 );
        hour   = d.getHours();
        minute = d.getMinutes();
        if (hour   > 12) { hour = hour - 12;      }
        if (hour   == 0) { hour = 12;             }
        if (hour   < 10) { hour   = "0" + hour;   }
        if (minute < 10) { minute = "0" + minute; }
        timeString = hour + ':' + minute;
        if(timeString!=undefined){
            array[i]=[i,timeString];
        }
    }
    return array;
} 


function initialize() {
    this.array = new Array();
    for (var i = 0; i < xscale; i++) {
        this.array[i] = [i, 0.0];
    }
}

function refreshStat() {
    if (!running) {
        running = true;
        draw();
        running = false;
    }
}

$(document).ready(function () {
    initialize();
    refreshStat();
    setInterval("refreshStat()", 10);
});

Answer 1

您误解了 flot 如何处理 xaxis 模式“时间”。它想要的是代表 javascript 时间戳的整数 x 值。然后它负责格式化为%H:%M。

所以你有一些复杂的代码在%H:%M 中生成值，然后将它们转换为时间戳并将它们传递给flot，然后还要指定要显示的刻度。相反，您可以只生成所需的时间戳，将它们放入您的数据数组中，如下所示：

[[1329930943084,0],
 [1329931043084,1],
 ...
 [<timestamp>  ,10]]

就是这样，只需将其输入 flot，无需在 x 或 y 轴上定义刻度。

此外，您的 setInterval 会引发错误，这可能就是您没有得到任何结果的原因。你可以让它更像这样：

setInterval(refreshStat, 10);

这是您的代码的超级简化版本：http://jsfiddle.net/ryleyb/MaJgn/