使用时间戳的Javascript Flot Chart

时间:2014-04-13 14:06:40

标签: javascript flot

我试图将时间戳值添加到x轴以显示实际的日/月/年数据。

它有效,但x轴上转换的数据看起来像每小时数据“4:01,4:02 ......” 当时间戳是“1396779010,1396865410 ......”时,关键是要正确显示每一个刻度的一天,而我真正不知道如何设置的是如何显示最近30个刻度的数据,我的意思是绘制所有数据的图表,但要关注最后30个滴答。

function weekendAreas(axes) {
    var markings = [],
    d = new Date(axes.xaxis.min);
    // go to the first Saturday

    d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
    d.setUTCSeconds(0);
    d.setUTCMinutes(0);
    d.setUTCHours(0);

    var i = d.getTime();

    // when we don't set yaxis, the rectangle automatically
    // extends to infinity upwards and downwards

    do {
        markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
        i += 7 * 24 * 60 * 60 * 1000;
    } while (i < axes.xaxis.max);

    return markings;
}

var plot = $.plot("#placeholder", [
            { data: data1, label: "data1"},
            { data: data2, label: "data2"},
            { data: data3, label: "data3"}
        ], {
            series: {
                lines: {
                    show: true
                },
                shadowSize: 0
            },
            crosshair: {
                mode: "x"
            },
            points: {
                show: true
            },
            xaxis: {
                //zoomRange: [0, 0],
                mode: "time",
                tickLength: 0,
                panRange: [null, null]
            },
            grid: {
                hoverable: true,
                clickable: false,
                markings: weekendAreas
            },
            yaxis: {
                //zoomRange: [0, 0],
                //panRange: [36, 39.5]
                panRange: false
            },
            zoom: {
                //interactive: true
            },
            pan: {
                interactive: true
            }
        });

0 个答案:

没有答案