Question

使用laravel，我从消耗的Rest API链接（Spring应用程序）（http://85614a50.ngrok.io/api/devices）创建了具有2个系列（轴）的Highcharts

第一个系列及时地对内存进行可视化，以便对象包含（内存使用情况，时间戳记）

第二系列对CPU的时间和对象包含的内容（CPU使用率，时间戳）进行了可视化处理

所有结果都是静态显示的，现在我想在图表上动态显示。

我创建了一个函数，该函数每5秒调用一次rest api，而Chart中的事件函数每5秒刷新一次。

它可以工作，但是轴不会显示我来自Series的数据（它显示了一些随机数，因为x和y变量被声明为当前时间和随机数）。

所以我知道我必须在x，y变量中调用一个Series。但是没有弄清楚怎么做。有人知道如何解决这个问题吗？

P.S。

如果您声明变量并且chart（data）未更新，则可能会发生，因为我没有打开Java客户端应用程序，因此它只显示相同的数据。由于内存不足，我无法保持应用程序的运行状态我的硬盘。仅监视应用程序处于启用状态，因此链接有效！

我的代码示例：https://codepen.io/anon/pen/eLERGG（如果打开此链接，则需要5秒钟才能显示图表）

Home..blade.php

@extends('layouts.app')

@section('content')
        <style type="text/css">
#container{
    width: 100%;
    margin: 0 auto;
}

.col-lg-4 {
    margin-bottom: 10%;
    min-width: 40%;
    max-width: 100%;
    margin: 1em auto;
    height: 400px;

}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 10%; /* Location of the box */
    padding-right: 10%;
    padding-left: 10%;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}  
#container.modal{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display:block;


}




        </style>

<h2 class="text-center" >{{$user->first_name}} Charts </h2>


<div id="container">
    <div class="row">

   </div>
</div>
 <script type="text/javascript">
$(function () {
    setInterval(getHighChart, 10000); //30 seconds onload="getHighChart()" 
});

function getHighChart() {

$.getJSON( "http://localhost:8000/api/devices", function( data ) {


console.log(data);

var mappedClientsAllias = _.map(_.uniqBy(data, "clientName"), "clientName");
var mappedClients = _.map(_.uniqBy(data, "Id_client"), "Id_client");

var clients = [];

_.forEach(mappedClients, function(Id_client, clientName) {
  var tempClient = {
    Allias: mappedClientsAllias[clientName],
    name: Id_client,
    data: [],
    memory:[]
  };
  tempClient2=tempClient;
  _.forEach(data, function(tempData) {
    if (Id_client=== tempData.Id_client**strong text**) {
      _.forEach(tempData.clientData, function(clientData) {
        tempClient.data.push([
          clientData.timestamp,
          clientData.cpuUsage,
        ]);
         tempClient.memory.push([
          clientData.timestamp,
          clientData.memoryUsage,
        ]);


      });
    }
  });


  clients.push(tempClient);
});




console.log("clients", clients);
var chart = _.forEach(clients, function(client) {

  $('<div class="col-lg-4">')
    .css("position", "relative")
    .appendTo("#container")
    .highcharts("StockChart", {
      marker: {
        states: {
          enabled: true
        }
      },
      time: {
        timezoneOffset: -2 * 60
      },
    exporting: {
                buttons: {

                      customButton3: {
                        text: 'Zooming',
                        //make fullscreen of chart with size change
                        onclick: function(e) {
                           var w = $(window).width();
                           var h = $(window).height();
                        $(e.target).closest('#container').toggleClass('modal');
  if($(e.target).closest('#container').hasClass('modal')) {
    $('.col-lg-4').hide();
    $(e.target).closest('.col-lg-4').show();
      $('.col-lg-4').css({
                  'width': w * .9,
                'height': h * .9
            });  

  } else {
    $('.col-lg-4').show();
     $('.col-lg-4').css({
                 'width': '',
                'height': ''

            });

  }
$(e.target).closest('.col-lg-4').highcharts().reflow();


                        }
                    }
                }
            }, 
      rangeSelector: {
        y: 15,
        buttons: [
          {
            count: 1,
            type: "minute",
            text: "Sec"
          },
          {
            count: 1,
            type: "hour",
            text: "Min"
          },
          {
            count: 1,
            type: "day",
            text: "Hours"
          },

          {
            type: "all",
            text: "All"
          }
        ],
        title: "hours",
        inputEnabled: true,
        _selected: 1
      },

      title: {
        text: client.Allias
      },
      yAxis: [{

                labels: {
                    enabled: true,
                    align: 'right',
                    x: -3
                },
                title: {
                    text: 'CPU'
                },
                height: '50%',
                lineWidth: 2,
                   color: 'red'
            }, {
                labels: {
                    align: 'right',
                    x: -3
                },
                title: {
                    text: 'Memory'
                },
                top: '70%',
                height: '50%',
                offset: 0,
                lineWidth: 2,

            }],
      xAxis: {
        tickInterval: 1,
        title: {
          enabled: true,
          text: "Client usage"
        },
         top: '20%',
        type: "datetime",
        dateTimeLabelFormats: {
          second: "%H:%M:%S",
          minute: "%H:%M",
          hour: "%H:%M",
          day: "%e. %b",
          week: "%e. %b",
          day: "%Y<br/>%b-%d"
        }
      },

      plotOptions: {
        series: {
          marker: {
            enabled: false,
          }
        }
      },

       series: [{
        name: "Memory USAGE",
        data: client.memory.sort()
    },  // Add a new series
    {
        name: "Cpu USAGE",
         yAxis: 1,
          color: 'red',
        data: client.data.sort()

    }],

      chart: {
        renderTo: "container",
        height:400,
     events: {
            load: function () {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 100);
                    series.addPoint([x, y], false, true);
                }, 1000);
            }
        }
      },

    });



});

  });

}




</script>




 @endsection

Layouts.app

<!DOCTYPE html>
<html lang="en">
  <head>

     <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Master thesis application</title>

   <!-- Jquery --> 


  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

      <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Import css file-->
<link href="{{asset('css/style.css')}}" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://code.highcharts.com/stock/highstock.js"></script>
  <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>

  </head>
<script type="text/javascript">

</script>
  <body>
     @include('doc.header')

   @include('doc.nav')
<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>
    <div class="container">
     @include('doc.ifno')


    @yield('main')
    </div> <!-- /container -->

 @include('doc.Navfoot')


  </body>
</html>

使用Rest api数据（Highcharts）动态更新Highstock多个系列

0 个答案: