Флот-график не работает со временем и счетом - PullRequest
Новая
       18

Флот-график не работает со временем и счетом

0 голосов
/ 22 февраля 2012

Привет, мне нужно создать график с плавающей точкой.для этого я использую этот плагин http://people.iola.dk/olau/flot/API.txt.

Мне нужно показать время (ч: м) на оси х и рассчитывает на оси у.Для этого я написал такой сценарий.Но это не работает.Любое тело может помочь мне, пожалуйста.

var running = false;массив var;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);
});

1 Ответ

1 голос
/ 22 февраля 2012

Вы ошиблись, как flot работает с xaxis в режиме «время». Он хочет, чтобы значения x были целыми числами, представляющими метки времени javascript. Затем он заботится о форматировании до %H:%M.

Таким образом, у вас есть некоторый запутанный код, который создает значения в %H:%M, а затем преобразует их в метки времени и передает их во flot, но затем также указывает, какие галочки показывать. Вместо этого вы можете просто сгенерировать нужные временные метки и поместить их в свой массив данных следующим образом: 

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

И это все, просто вставьте это во флот, не нужно определять тики по оси x или y.

Кроме того, ваш setInterval выдает ошибку, из-за которой, возможно, вы ничего не получили. Вы можете сделать это больше так: 

setInterval(refreshStat, 10);

Вот упрощенная версия вашего кода: http://jsfiddle.net/ryleyb/MaJgn/

...