Javascript 未捕获类型错误：无法读取属性'；addPoint'；未定义（Highstock实时数据）的数量
正如我之前发布的一个问题，我正在使用Highcharts使用带有2个系列（轴）的RESTAPI（Spring应用程序）（） 第一个系列是内存与时间，因此对象包含（内存使用情况、时间戳） 第二个系列是CPU与时间，因此对象包含（CPU使用率、时间戳） 这个数据现在是静态的，但我希望它是动态的 我创建了一个函数，每5秒调用一次RESTAPI，并在图表中创建了一个事件函数，每5秒刷新一次 我试图用series在事件函数中声明变量，但它给出了以下错误： 未捕获的TypeError:无法读取未定义的属性“addPoint” 代码笔示例： Home.blade.phpJavascript 未捕获类型错误：无法读取属性'；addPoint'；未定义（Highstock实时数据）的数量,javascript,jquery,highcharts,Javascript,Jquery,Highcharts,正如我之前发布的一个问题，我正在使用Highcharts使用带有2个系列（轴）的RESTAPI（Spring应用程序）（） 第一个系列是内存与时间，因此对象包含（内存使用情况、时间戳） 第二个系列是CPU与时间，因此对象包含（CPU使用率、时间戳） 这个数据现在是静态的，但我希望它是动态的 我创建了一个函数，每5秒调用一次RESTAPI，并在图表中创建了一个事件函数，每5秒刷新一次 我试图用series在事件函数中声明变量，但它给出了以下错误： 未捕获的TypeError:无法读取未定义的属性
@extends('index.app')
@section('main')
<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"), "clientAllias");
var mappedClients = _.map(_.uniqBy(data, "Id_client"), "Id_client");
var devices= [];
_.forEach(mappedClients, function(Id_client, clientName) {
var tempClient = {
Allias: mappedClientsAllias[clientName],
name: Id_client,
data: [],
memory:[]
};
tempClient2=tempClient;
_.forEach(data, function(tempData) {
if (clientId === tempData.clientId) {
_.forEach(tempData.clientData, function(clientData) {
tempClient.data.push([
clientData.timestamp,
clientData.cpuUsage,
]);
tempClient.memory.push([
clientData.timestamp,
clientData.memoryUsage,
]);
});
}
});
devices.push(tempClient);
});
console.log("devices", devices);
var chart = _.forEach(devices, function(device) {
$('<div class="col-lg-4">')
.css("position", "relative")
.appendTo("#container")
.highcharts("StockChart", {
marker: {
states: {
enabled: true
}
},
time: {
timezoneOffset: -5 * 60
},
exporting: {
buttons: {
customButton3: {
text: 'Zooming',
//make fullscreen of chart with size change
onclick: function(b) {
var w = $(window).width();
var h = $(window).height();
$(b.target).closest('#container').toggleClass('modal');
if($(b.target).closest('#container').hasClass('modal')) {
$('.col-lg-4').hide();
$(b.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': ''
});
}
$(b.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: device.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.%b-%d"
}
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
series: [{
name: "Memory USAGE",
data: device.memory.sort()
}, // Add a new series
{
name: "Cpu USAGE",
yAxis: 1,
color: 'red',
data: device.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
@extends（'index.app'））
@节（“主节”）
#容器{
宽度：100%；
保证金：0自动；
}
.col-lg-4{
利润底部：10%；
最小宽度：40%；
最大宽度：100%；
保证金：1em自动；
高度：400px；
}
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：10%；/*框的位置*/
右：10%；
左：10%；
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
#集装箱{
位置：固定；
宽度：100%；
身高：100%；
排名：0；
左：0；
背景：rgba（0,0,0,0.5）；
显示：块；
}
{{$user->first_name}图表
$（函数（）{
setInterval（getHighChart，10000）；//30秒onload=“getHighChart（）”
});
函数getHighChart（）{
$.getJSON（“http://localhost:8000/api/devices，函数（数据）{
控制台日志（数据）；
var mappedClientsAllias=u.map（u.uniqBy（数据，“clientName”），“clientAllias”）；
var mappedClients=u.map（u.uniqBy（数据，“Id_客户端”），“Id_客户端”）；
var设备=[]；
_.forEach（MappedClient，函数（Id\u client，clientName）{
var tempClient={
Allias:mappedClientsAllias[clientName]，
姓名：Id_客户，
数据：[]，
内存：[]
};
tempClient2=tempClient；
_.forEach（数据、函数）（tempData）{
if（clientId==tempData.clientId）{
_.forEach（tempData.clientData，函数（clientData）{
tempClient.data.push([
clientData.timestamp，
clientData.cpuUsage，
]);
tempClient.memory.push([
clientData.timestamp，
clientData.memoryUsage，
]);
});
}
});
设备推送（tempClient）；
});
控制台日志（“设备”，设备）；
var图表=u0.forEach（设备、函数（设备）{
$('')
.css（“位置”、“相对”）
.附于（“#容器”）
.highcharts（“股票图表”{
标记：{
国家：{
已启用：true
}
},
时间：{
时区偏移：-5*60
},
出口：{
按钮：{
自定义按钮3：{
文本：“缩放”，
//更改大小，使图表全屏显示
onclick：函数（b）{
var w=$（window.width（）；
var h=$（window.height（）；
$（b.target）。最近（“#容器”）。toggleClass（'modal'）；
if（$（b.target）.closest（'#container'）.hasClass（'modal'））{
$（'.col-lg-4'）.hide（）；
$（b.target）.closest（'.col-lg-4'）.show（）；
$（'.col-lg-4'）.css({
“宽度”：w*.9，
“高度”：h*.9
});
}否则{
$（'.col-lg-4'）.show（）；
$（'.col-lg-4'）.css({
“宽度”：“，
“高度”：”
});
}
$（b.target）。最近（'.col-lg-4'）。高图表（）。回流（）；
}
}
}
},
范围选择器：{
y:15，
按钮：[
{
计数：1，
键入：“分钟”，
文本：“Sec”
},
{
计数：1，
输入：“小时”，
文本：“Min”
},
{
计数：1，
键入：“日”，
正文：“小时”
},
{
键入：“全部”，
案文：“全部”
}
],
标题：“小时”，
投入使用：是的，
_选定：1
},
标题：{
文本：device.Allias
},
亚克斯：[{
标签：{
启用：对，
对齐：“右”，
x:-3
},
标题：{
文本：“CPU”
},
身高：50%，
线宽：2，
颜色：“红色”
}, {
标签：{
对齐：“右”，
x:-3
},
标题：{
文字：“记忆”
},
排名前：“70%”，
身高：50%，
偏移量：0，
线宽：2，
}],
xAxis：{
时间间隔：1，
标题：{
启用：对，
文本：“客户端使用”
},
排名前20%，
键入：“日期时间”，
日期时间标签格式：{
第二个：“%H:%M:%S”，
分钟：“%H:%M”，
小时：“%H:%M”，
日期：“%e.%b”，
周：“%e.%b”，
日期：“%Y.%b-%d”
}
},
打印选项：{
系列：{
标记：{
启用：false，
}
}
},
系列：[{
名称：“内存使用”，
数据：device.memory.sort（）
}，//添加新系列
{
名称：“Cpu使用率”，
亚克西斯:1,，
颜色：“红色”，
数据：device.data.sort（）
}],
图表：{
renderTo：“容器”，
身高：400，
活动：{
加载：函数（）{
//设置ch的更新
<!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>
<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>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/docs/3.3/examples/jumbotron-narrow/">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- Import css file-->
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"/>
<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>
<body>
@include('file.hed')
@include('file.bar')
<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('file.info')
@yield('main')
</div> <!-- /container -->
@include('file.down')
</body>
</html>
events: {
load: function (series) {
var memory=client.memory.sort();
setInterval(function () {
var x = memory;
series[0].addPoint([x], true, true);
}, 5000);
}
}
events: {
load: function () {
var memory = client.memory.sort(),
series = this.series;
setInterval(function () {
var x = memory;
series[0].addPoint([x], true, true);
}, 5000);
}
}