Question

我找到了此Highchart实时数据示例Live data。我尝试使用自己来自MySQL的数据，因此我更改$y中的live-server-data.php以在使用函数fetch_assoc()后接收数据。

HTML代码

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
        <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>

    </head>
    <body>
        <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

JS

 var chart; // global
    		
    		function requestData() {
    			$.ajax({
    				url: 'live-server-data.php', 
    				success: function(point) {
    					var series = chart.series[0],
    						shift = series.data.length > 20; // shift if the series is longer than 20
    		
    					chart.series[0].addPoint(eval(point), true, shift);
    					
    					// call it again after one second
    					setTimeout(requestData, 1000);	
    				},
    				cache: false
    			});
    		}
    			
    		$(document).ready(function() {
    			chart = new Highcharts.Chart({
    				chart: {
    					renderTo: 'container',
    					defaultSeriesType: 'spline',
    					events: {
    						load: requestData
    					}
    				},
    				title: {
    					text: 'Live random data'
    				},
    				xAxis: {
    					type: 'datetime',
    					tickPixelInterval: 150,
    					maxZoom: 20 * 1000
    				},
    				yAxis: {
    					minPadding: 0.2,
    					maxPadding: 0.2,
    					title: {
    						text: 'Value',
    						margin: 80
    					}
    				},
    				series: [{
    					name: 'Random data',
    					data: []
    				}]
    			});		
    		});

PHP代码

<?php 

$conn = new mysqli($servername, $username, $password, $dbname);
if($conn->connect_error){
    die("Connection failed: ".$conn->connect_error);
}

$sql_1 = "SELECT SensorData AS power FROM $tbname where SensorID = '1'";

$result_1=$conn->query($sql_1);
while($row = $result_1->fetch_assoc()){
    $y = $row['power'];
}

$conn->close();

 header("Content-type: text/json");
 multiplied by 1000.
 $x = time() * 1000;
 $ret = array($x, $y);
 echo json_encode($ret);
?>

图表已移动，但未显示任何数据。

所以我在Chrome浏览器上按F12，我发现了这个。

我认为"14.600"可能是我问题的原因。如果您知道解决此问题的解决方案，请告诉我。非常感谢你。

Answer 1

我认为图表需要array，其中包含数值。在您的情况下，一个值是数字，但另一个是字符串，因此将所有值转换为数字，即整数或浮点数。（此处首选Float）并将该数组传递给图表。

来自MySQL的高清实时数据

1 个答案: