Question

我有一个flot图表，根据最后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变量保持最新状态。

JQuery FLOT图表动态Y轴

1 个答案: