个人中心
gpt4 book ai didi

javascript - Google Chart 刷新卡住页面/div + 内存不足

转载 作者：行者123 更新时间：2023-11-29 21:12:48 24 4
gpt4 key购买 nike

所以我一直在使用 google chart 作为我使用 python 和 web.py 制作的仪表板。我让它工作以显示我想要的所有内容并且从技术上讲它有效。然而，在 ajax 调用期间，谷歌图表的自动刷新挂起了我的页面，因为我可能在一页上有多个图表，这真的很糟糕(获得 1 秒的正常移动，然后在图表上卡住几秒钟的处理时间这一页)。一段时间后它停止工作并向我显示资源不足错误。

谁能看看下面的代码并告诉我哪里出了问题。请注意，我的 ajax 调用现在是异步完成的，这只会卡住 div，但我仍然会收到错误消息。还要注意代码来自 web.py 模板系统，因此一些 javascript 调用前面有 2 个美元符号。

谢谢!

$def with (cpuUsage, nodes)

<div id="cpu_usage_graphs">

</div>

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script>
        // load chart lib
        //google.load('visualization', '1', {
        //  packages: ['corechart']
        //});
        google.charts.load('current', {packages: ['corechart']});

        var nodes = $:nodes;
        var graphRow = document.getElementById("cpu_usage_graphs");
        $$.each(nodes, function(i, node) {
            graphRow.insertAdjacentHTML('beforeend', '<div class="col-lg-6"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> CPU Usage for Node ' + node.hostName + '</h3></div><div id="CPU_Usage' + node.nodeId + '" class="panel-body"></div></div></div>');

            // call drawChart once google charts is loaded
            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {
                // JSONP request
                var jsonData = $$.ajax({
                  url: 'http://192.168.1.100:5051/CPU_Usage?node=' + node.nodeId,
                  type: 'GET',
                  async: true,
                  dataType: 'json',
                }).done(function (results) {
                    var data = new google.visualization.DataTable();

                    data.addColumn('datetime', 'Time');
                    data.addColumn('number', 'cpu usage');

                    $$.each(results[0], function (i, row) {
                        data.addRow([
                        (new Date(row.timestamp)),
                        parseFloat(row.value),
                        ]);
                      });

                    var chart = new google.visualization.LineChart($$('#CPU_Usage' + node.nodeId).get(0));

                    chart.draw(data, {
                        'legend':'left',
                      });

                    }).fail(function()  {
                        console.log("Sorry. Server unavailable. ");
                    }); 
                setInterval(refreshData, 5000);
              }

            function refreshData () {
                drawChart();
            }

            //refreshData();
        });
    </script>

  </head>
  <body>
    <div id="chart" style="width: 100%;"></div>
  </body>
</html>

最佳答案

由于 setInterval 调用的次数，资源很可能被耗尽

每个间隔都会干扰下一个间隔，没有足够的资源来完成它们

另外，谷歌的 setOnLoadCallback 通常每次页面加载只使用一次，
第一次回调结束后就不需要了

建议将回调放在 load 语句中

推荐设置如下，只有1个setInterval用于重新绘制所有图表...

注意:5秒开始重新绘制似乎有点快，建议在开始下一轮之前留出足够的时间让所有图表完成绘制...... 

$def with (cpuUsage, nodes)

<div id="cpu_usage_graphs">

</div>

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script>
        google.charts.load('current', {
          callback: function () {
            var nodes = $:nodes;
            var graphRow = document.getElementById("cpu_usage_graphs");

            function drawCharts() {
              $$.each(nodes, function(i, node) {
                if (document.getElementById('CPU_Usage' + node.nodeId) === null) {
                  graphRow.insertAdjacentHTML('beforeend', '<div class="col-lg-6"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> CPU Usage for Node ' + node.hostName + '</h3></div><div id="CPU_Usage' + node.nodeId + '" class="panel-body"></div></div></div>');
                }

                $$.ajax({
                  url: 'http://192.168.1.100:5051/CPU_Usage?node=' + node.nodeId,
                  type: 'GET',
                  async: true,
                  dataType: 'json',
                }).done(function (results) {
                  var data = new google.visualization.DataTable();

                  data.addColumn('datetime', 'Time');
                  data.addColumn('number', 'cpu usage');

                  $$.each(results[0], function (i, row) {
                    data.addRow([
                      (new Date(row.timestamp)),
                      parseFloat(row.value),
                    ]);
                  });

                  var chart = new google.visualization.LineChart($$('#CPU_Usage' + node.nodeId).get(0));
                  chart.draw(data, {
                    'legend':'left',
                  });
                }).fail(function()  {
                  console.log("Sorry. Server unavailable. ");
                });
              });
            }

            drawCharts();
            setInterval(drawCharts, 5000);
          },
          packages: ['corechart']
        });
    </script>

  </head>
  <body>
    <div id="chart" style="width: 100%;"></div>
  </body>
</html>

关于javascript - Google Chart 刷新卡住页面/div + 内存不足，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40927964/

24 4 0
文章推荐： javascript - 如何在 for 循环中使用 setInterval()
文章推荐： android - 调用 camera.release() 时手机死机
文章推荐： javascript - 如何在angularjs中使用ng-class应用css
文章推荐： php - JpGraph 重叠图中的 x 轴刻度
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com