实时图表使用Flot jQuery

Question

我正在寻找一种方法，使用Flot（Jquery）图表来显示虚拟机的当前CPU使用率。目前我能够绘制简单的线条，但不知道如何在新数据到来时使图形向左移动。

<script type="text/javascript">
        var d1 = [ [0,0] ];
         options = {
                lines: {
                    show: true
                },
                points: {
                    show: true
                },
                xaxis: {
                    tickDecimals: 0,
                    tickSize: 1
                },
                grid: {
                    backgroundColor: {
                        colors: ["#fff", "#eee"]
                    }
                }
        };

        function init() {                                              
            $.plot($("#placeholder"), d1, options);
        } /* init Function */

        function update(){
            for (var i = 0; i < 14; i += 0.5) {
                d1.push([i, Math.floor(Math.random()*11)]);
            }
            $.plot($("#placeholder"), [ d1 ], options);
        }
        init();
        $("input.dataUpdate").click(function () {
            update();
        });         
    </script>

任何想法或者其他能够完成任务的插件吗？

编辑：

我需要翻译这个关联数组：

 [ [1, (random1)], [2, (random2), [3, (random2) ]

to

 [ [2, (random2)], [3, (random3), [4, (random4) ] (new element 4)

我不知道如何实现这个。

- Disco

Answer 1

我在查看他们的API时发现了一个名为'setData'的函数，看起来它允许您更新现有图表的数据。

http://flot.googlecode.com/svn/trunk/API.txt

[更新] 在查看其他浏览器中的上述示例后，从头重建绘图时的刷新率有点慢。我注意到更新之间存在不良闪烁。以下是更好的解决方法：

var xVal = 0;
var data = [[],[]];
var plot = $.plot( $("#chart4"), data);

function getData(){
    // This could be an ajax call back.
    var yVal1 = Math.floor(Math.random()*11);
    var yVal2 = Math.floor(Math.random()*11);
    var datum1 = [xVal, yVal1];
    var datum2 = [xVal, yVal2];
    data[0].push(datum1);
    data[1].push(datum2);
    if(data[0].length>10){
        // only allow ten points
        data[0] = data[0].splice(1);
        data[1] = data[1].splice(1);
    }
    xVal++;
    plot.setData(data);
    plot.setupGrid();
    plot.draw();
}

setInterval(getData, 1000);

我也写了一篇关于flot的博客文章，其中对此进行了更详细的描述：

http://blog.bobcravens.com/2011/01/web-charts-using-jquery-flot/

Bob

- rcravens

---

如何调用这个函数？plot.setData不起作用...对不起，我很无知。 - Disco

这是一个通过ajax和settimer进行更新的flot示例：http://people.iola.dk/olau/flot/examples/ajax.html - rcravens

好的。我稍微调试了一下。这里有一个更新轴的示例：http://jsfiddle.net/y9brY/2/ - rcravens

这是另一个更新，保留最近的最大点数（在此情况下为10）。http://jsfiddle.net/y9brY/3/ - rcravens

@rcravens：你的示例对我非常有帮助。非常感谢。你能否分享一下上面给出的链接(people.iola.dk/olau/flot/examples/ajax.html)的源代码呢？ 提前致谢.. :) - Kaushal Bhatt

Answer 2

你可以在数组上使用 shift 方法来删除第一个元素（即将其向左移动并减小其大小1个元素），而使用 push 则可以在末尾添加元素并增加其大小至 shift 之前的原始大小，例如：

d1.shift();
d1.push(new_element);

然后使用$.plot(...)再次显示绘图。

- Neil

---

几乎成功，只是像d1.push([arraySize, randomValue])这样我添加的新数据无法滚动。 - Disco

嗨，我从未使用过FLOT；我想了几年，但它对于我想要的有点笨重。“shift()”将删除第一个元素，“push()”将添加新的最后一个元素，这就是滚动所涉及的内容，所以我不明白为什么FLOT图表不能滚动。当旧的第一个元素在数组中不存在时，它如何显示旧值呢？ - Neil