Highstock更新数据getJson
[英]Highstock Update Data getJson
问题描述
I'm new to Javascript and got the following Code working: 
我是Java的新手，可以使用以下代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Temperatur</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$.getJSON('sqltojson.php', function (data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 60,
text: 'hour',
dataGrouping: {
forced: true,
units: [['minute', [1]]]
}
}, {
type: 'minute',
count: 360,
text: '6 hour',
dataGrouping: {
forced: true,
units: [['minute', [1]]]
}
}, {
type: 'all',
text: 'all',
dataGrouping: {
forced: true,
units: [['minute', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 0
},
title: {
text: 'Temperatur'
},
series: [{
name: 'Temperatur',
type: 'spline',
data: data,
color: '#0000FF',
tooltip: {
valueSuffix: '°C'
}
}]
});
});
});
$(function () {
$.getJSON('sqltojson2.php', function (data) {
// Create the chart
$('#container2').highcharts('StockChart', {
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 60,
text: 'hour',
dataGrouping: {
forced: true,
units: [['minute', [1]]]
}
}, {
type: 'minute',
count: 360,
text: '6 hour',
dataGrouping: {
forced: true,
units: [['minute', [1]]]
}
}, {
type: 'all',
text: 'all',
dataGrouping: {
forced: true,
units: [['minute', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 0
},
title: {
text: 'Luftfeuchte'
},
series: [{
name: 'Luftfeuchte',
type: 'spline',
data: data,
color: '#FF0000',
tooltip: {
valueSuffix: '%'
}
}]
});
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
<div id="container2" style="height: 400px; min-width: 310px"></div>
</body>
</html>
I now want to get both of the graphs into one Chart, and it should Update every Minute. 现在，我想将两个图形都合并到一个图表中，并且它应该每分钟更新一次。 At the Moment I have two php scripts. 目前，我有两个php脚本。 One for [Timestamp, Temperature] and ohne for [Timestamp, Humidity]. 一个用于[Timestamp，Temperature]，另一个用于[Timestamp，Humidity]。
I tried several Code snippets I found here, but i couldn't change it to my needs, because of my not present Javascript knowledge. 我尝试了一些在这里找到的代码段，但是由于我不了解Javascript，所以无法将其更改为我的需要。
Could someone please give me a hint what I should try, or where I could find something that explains what I have to do? 有人可以给我一个提示，我应该尝试什么，或者在哪里可以找到可以解释我必须做什么的东西？
Thank you in advance. 先感谢您。
1 个解决方案
解决方案1
2 已采纳 2016-11-03 11:32:07
Use setInterval() to run your javascript every time interval as you choose. 使用setInterval（）在您选择的每个时间间隔运行您的JavaScript。
http://www.w3schools.com/jsref/met_win_setinterval.asp http://www.w3schools.com/jsref/met_win_setinterval.asp
is a good tutorial to get to know how it's done. 是了解它是如何完成的好教程。 I hope rest you can do from your current javascript knowledge. 希望您能从当前的JavaScript知识中受益。 Name current two functions, run it inside another function defined inside setInterval function. 命名当前的两个函数，在setInterval函数中定义的另一个函数中运行它。
If you want to draw two charts on top of each other, pass it as a two-D array to HighChart. 如果要相互绘制两个图表，请将其作为二维数组传递给HighChart。 http://www.highcharts.com/demo contains lot of examples, and you can follow that. http://www.highcharts.com/demo包含许多示例，您可以按照这些示例进行操作。
For example,pass an array to a function which contains your code to draw the graph, then use that variable to give value to series. 例如，将数组传递给包含您的代码以绘制图形的函数，然后使用该变量为序列赋予值。
function draw_first_chart(div_id,x_axis,data_input)
{
$(div_id).highcharts({
chart: {
// ..//
},
title: {
// ..//
},
xAxis: {
// ..//
},
categories: x_axis
},
yAxis: {
// ..//
},
tooltip: {
// ..//
},
legend: {
// ..//
},
series: data_input
});
Here, if you want to display finite values in x axis, send an array to variable x_axis and other data to data_input as an array. 在这里，如果要在x轴上显示有限值，则将数组发送到变量x_axis，并将其他数据发送到data_input作为数组。 If not just ignore variable x_axis and pass an array to data_input. 如果不是，则忽略变量x_axis并将数组传递给data_input。 Make sure in the 确保在
data_input[i]['name']
should contain all graph titles (Humidity, Tempreture) and 应该包含所有图形标题（湿度，温度）和
data_input[i]['data']
contains data. 包含数据。 i is the number for each graph. 我是每个图的数字。
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.