流程图不适用于时间和计数

Question

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

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

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

//该函数进行绘图 
函数绘制（）{
    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"),[
            {
                标签：“已登录”，
                数据：这个.array，
                行: { 显示: true, 填充: true, fillColor: "rgba(249, 28, 61,0.3)",lineWidth: 2.5 },
                //颜色:"rgba(249,28,61,1)"
                颜色：0
            }         
        ],
        {
        x 轴：{
            刻度：getTimeArray(1),
            模式：“时间”，
            时间格式：“%H:%M”

        },
        y 轴：{
            刻度: [0, 1, 2, 3,4,5, 6,7,8,9,10],
            分钟：0，
            刻度小数: 0
        },            
        网格： {
            显示：真实，
            颜色: '#474747',
            刻度颜色: '#474747',
            边框宽度：2，
            自动突出显示：真，
            鼠标活动半径：2
        }
    });
}

函数 getTimeArray(flg)
{
    数组=[]；
    var d = new Date();
    var 小时='';
    var 分钟='';
    var timeString ='';

    for (var i = 9; i >= 0; i--){
        if(i<9)d = new Date( d.getTime() - 5*60*1000 );
        小时 = d.getHours();
        分钟 = d.getMinutes();
        if (小时 > 12) { 小时 = 小时 - 12; }
        if (小时 == 0) { 小时 = 12; }
        if (小时 < 10) { 小时 = "0" + 小时; }
        if (分钟 < 10) { 分钟 = "0" + 分钟; }
        timeString = 小时 + ':' + 分钟；
        如果（时间字符串！=未定义）{
            数组[i]=[i,时间字符串];
        }
    }
    返回数组；
} 


函数初始化（）{
    this.array = new Array();
    for (var i = 0; i < xscale; i++) {
        this.array[i] = [i, 0.0];
    }
}

函数刷新状态（）{
    如果（！运​​行）{
        运行=真；
        画（）;
        运行=假；
    }
}

$(文档).ready(函数() {
    初始化（）;
    刷新状态（）；
    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/