从右侧开始绘制图形 [英] start plotting graph from right side

问题描述

我正在绘制带有浮点图的实时图.

I am plotting a real time graph with flot graphs.

$(function () {

    var data = [];
    var dataset;
    var totalPoints = 100;
    var updateInterval = 1000;
    var now = new Date().getTime();    

    function GetData() {

        if (data.length > totalPoints) {
            data.shift();
        }    

        var y = Math.random() * 100;
        var temp = [now += updateInterval, y];

        data.push(temp);    
    }

    var options = {
        series: {
            lines: {
                show: true,
                lineWidth: 1.2,
                fill: true
            }
        },
        xaxis: {
            mode: "time",
            tickSize: [2, "second"],
            tickFormatter: function (v, axis) {
                var date = new Date(v);

                if (date.getSeconds() % 20 == 0) {
                    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

                    return hours + ":" + minutes + ":" + seconds;
                } else {
                    return "";
                }
            },
            axisLabel: "Time",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10
        },
        yaxis: {
            min: 0,
            max: 100,
            tickSize: 5,
            tickFormatter: function (v, axis) {
                if (v % 10 == 0) {
                    return v + "%";
                } else {
                    return "";
                }
            },
            axisLabel: "CPU loading",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 6
        },
        legend: {
            labelBoxBorderColor: "#fff"
        },
        grid: {
            backgroundColor: "#000000",
            tickColor: "#008040"
        }
    };

    $(document).ready(function () {
        GetData();

        dataset = [{
            label: "CPU",
            data: data,
            color: "#00FF00"
        }];

        $.plot($("#placeholder"), dataset, options);

        function update() {
            GetData();    
            $.plot($("#placeholder"), dataset, options)
            setTimeout(update, updateInterval);
        }

        update();
    });    
});

我每隔一段时间更新一次图形.问题是图形总是从左开始绘制.我希望图形从右开始开始绘制，并随着每个间隔的更新而不断向左移动.

I update the graph every interval. The issue is graph always starts plotting from left. I want the graph to start plotting from right and keep moving toward left as it gets updated every interval.

我尝试将数据作为[null, null]传递，但在控制台上引发了异常.

I tried passing data as [null, null] but it throws exception on console.

这里有更好的主意吗?

小提琴

Fiddle

推荐答案

您在通话中的时间值太高(1000000 ms = 1000秒=〜17分钟):

Your time value in the call is too high (1000000 ms = 1000 seconds = ~17 minutes):

setTimeout(update, 1000000);

如果您希望以全宽图表开始(以便从右侧输入数据)，请在初始变量声明之后添加此图表，以在测量开始之前用空白点填充图表:

Also if you wish to start with a full width chart (so that the data will come in from the right), add this after your initial variable declarations to fill the chart with empty points before the measuring starts:

for (var i = 0; i < totalPoints; i++) {
    data.push([now - (totalPoints - i) * updateInterval, null]);
}

我们还保存了开始时间，并且仅在开始时间之后有数据的时间绘制标签:

Also we save the start time and only draw labels for times after the start time where we have data:

tickFormatter: function (v, axis) {
    var date = new Date(v);
    if (date.getTime() < startDate) {
        return "";
    } else ...

查看此更新的小提琴，其中包括所有更改.

See this updated fiddle which includes all changes.

这篇关于从右侧开始绘制图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！