jQuery FLOT图表动态Y轴

Question

我有一个浮点图，它根据最后 100 个数据点计算最大 Y 轴值，然后成功绘制... 但 有时，正在进行的绘图（绘制新数据点时延迟 5 秒）的运行总和超过当前的最大限制。 有没有办法在图表上绘制新点时动态调整 Y 轴？

如果超出当前 Y 轴，这是一个关于如何动态缩放图表 Y 轴的有效问题，因为图表是随时间绘制的，每 5 秒添加一次新点，我在问如何缩放如果 Y 轴达到当前最大 Y 轴值以上，则 Y 轴适合新的绘图数据。

更新：

这是我使用的代码（Json 返回的数据）以及绘图更新计时器： "highY" 从数据库中获取最后 100 个数据点，并将最大值设置为最高计数 + 10%

        <script type="text/javascript">
            $(function () {
                var str1 = [], totalPoints = 300;
                var str2 = [], totalPoints = 300;
                var pts1 = '';
                var pts2 = '';
                if (pts1 == "" || pts == null) { pts = '2012-10-02 17:17:02'; }
                if (pts2 == "" || pts == null) { pts = '2012-10-02 17:17:02'; }
                var maxYaxis = <?PHP echo $highY; ?>;
                function getStr1() {
                    var ts1 = new Date().getTime();
                    var json1 = (function () {
                        var json1 = null;
                        var myURL = '<?PHP echo $updateURL; ?>?s=1&ts=' + ts1;
                        $.ajax({
                            'async': false,
                            'global': false,
                            'url': myURL,
                            'dataType': "json",
                            'success': function (data) {
                                json1 = data;
                            }
                        });
                        return json1;
                    })(); 
                    var y1 = json1['data']['avgpersec'];
                    var total_1 = json1['data']['running_total'];
                    document.getElementById('<?PHP echo $string1; ?>Total').innerHTML = total_1;
                    if (str1.length > 0) { str1 = str1.slice(1); }

                    while (str1.length < totalPoints) {
                        var prev = str1.length > 0 ? str1[str1.length - 1] : 50;
                        str1.push(y1);
                    }

                    // zip the generated y values with the x values
                    var res = [];
                    for (var i = 0; i < str1.length; ++i){ res.push([i, str1[i]]) }
                    return res;
                }

                function getStr2() {
                    var ts2 = new Date().getTime();
                    var json2 = (function () {
                        var json2 = null;
                        var myURL = '<?PHP echo $updateURL; ?>?s=2&ts=' + ts2;
                        $.ajax({
                            'async': false,
                            'global': false,
                            'url': myURL,
                            'dataType': "json",
                            'success': function (data) {
                                json2 = data;
                            }
                        });
                        return json2;
                    })(); 
                    var y2 = json2['data']['avgpersec'];
                    var total_2 = json2['data']['running_total'];
                    document.getElementById('<?PHP echo $string2; ?>Total').innerHTML = total_2;
                    if (str2.length > 0) { str2 = str2.slice(1); }

                    while (str2.length < totalPoints) {
                        var prev = str2.length > 0 ? str2[str2.length - 1] : 50;
                        str2.push(y2);
                    }

                    // zip the generated y values with the x values
                    var res = [];
                    for (var i = 0; i < str2.length; ++i){ res.push([i, str2[i]]) }
                    return res;
                }

                // setup control widget
                var updateInterval = 5000;
                $("#updateInterval").val(updateInterval).change(function () {
                    var v = $(this).val();
                    if (v && !isNaN(+v)) {
                        updateInterval = +v;
                    if (updateInterval < 1)
                        updateInterval = 1;
                    if (updateInterval > 2000)
                        updateInterval = 2000;
                        $(this).val("" + updateInterval);
                    }
                });

                // setup plot
                var options = {
                    series: { shadowSize: 0 }, // drawing is faster without shadows
                    yaxis: { min: 0, max: maxYaxis},
                    xaxis: { show: false },
                    colors: ["<?PHP echo $string1Color; ?>","<?PHP echo $string2Color; ?>"]
                };
                var plot = $.plot($("#placeholder"), [ getStr1(), getStr2() ], options);

                function update() {
                    plot.setData([ getStr1(), getStr2() ]);
                    plot.draw();
                    setTimeout(update, updateInterval);
                }

                update();
            });
        </script>

我希望完成的是在绘制新数据点时实时调整“$highY”（Y 轴）值，以便在新数据绘图点的值超过当前值时图表将缩放“ yaxis { max: # }" 在图表选项中设置。

Answer 1

我假设您现在正在使用flot.setData 和flot.draw？

最简单的解决方案是每次收到新数据时都使用新数据调用$.plot。在不同的时候，flot 插件的作者都建议将其作为处理这种情况的一种相当有效的方法。我在每秒刷新的图表上使用了它，发现它不会在用户的计算机上使用过多的 CPU，即使在一页上每秒刷新 3-4 个图表也是如此。

编辑根据您添加的代码（以及您建议的编辑），我会将更新功能更改为如下所示：

function update() {
   var data = [ getStr1(), getStr2() ];

   //modify options to set the y max to the new y max
   options.yaxis.max = maxYaxis;
   $.plot($("#placeholder"), data, options);
   setTimeout(update, updateInterval);
}

此外，您可以向getStr 和getStr 添加代码，以使maxYaxis 变量保持最新。