从开始右侧绘制图(start plotting graph from right side)

我用绘制图表海军报实时曲线图。

$(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();
    });    
});

我更新图表每间隔。 问题是图总是开始从左边绘制。 我希望图形开始从右侧绘制，并保持向，因为它得到更新每个间隔向左移动。

我试图将数据作为[null, null]但它抛出异常，在控制台上。

这里更好的想法？

小提琴

Answer 1:

在打电话给你的时间值过高（1000000毫秒=千秒=〜17分钟）：

setTimeout(update, 1000000);

此外，如果你想开始一个全宽图（这样的数据会从右边来的），你的初始变量声明之后添加此，以填补空分表测量开始之前：

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

同时，我们也节省启动时间和仅绘制标签的开始时间，我们有数据后次：

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

看到这个更新的小提琴 ，其中包括所有的变化。

文章来源: start plotting graph from right side