php+highchats+Mysql绘制网页折线，各种图_php网页 mysql数据图-CSDN博客

本文链接：https://blog.csdn.net/zxk_hi/article/details/91045464

1.百度直接搜索highchats，里面有很多写好的实例js

var chart = Highcharts.chart('container', {
	title: {
		text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
	},
	subtitle: {
		text: '数据来源：thesolarfoundation.com'
	},
	yAxis: {
		title: {
			text: '就业人数'
		}
	},
	legend: {
		layout: 'vertical',
		align: 'right',
		verticalAlign: 'middle'
	},
	plotOptions: {
		series: {
			label: {
				connectorAllowed: false
			},
			pointStart: 2010
		}
	},
	series: [{
		name: '安装，实施人员',
		data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
	}, {
		name: '工人',
		data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
	}, {
		name: '销售',
		data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
	}, {
		name: '项目开发',
		data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
	}, {
		name: '其他',
		data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
	}],
	responsive: {
		rules: [{
			condition: {
				maxWidth: 500
			},
			chartOptions: {
				legend: {
					layout: 'horizontal',
					align: 'center',
					verticalAlign: 'bottom'
				}
			}
		}]
	}
});

例如上面这个。

2，要想把其中的死数据换成数据库中的数据。很简单，php读出数据，转化为json格式

如下代码：

<?php
$con = mysql_connect('xxxxxx', '用户名', '密码');
mysql_select_db("xhf", $con);
$sql = "SELECT id, temperature ,hum from room";
$result=mysql_query($sql,$con);

while($row = mysql_fetch_array($result))
{
$day[]=intval($row['id']);
$count[]=intval($row['temperature']);
$count1[]=intval($row['hum']);
}
$day = json_encode($day);
$zxk1 = json_encode($count);
$shidu = json_encode($count1);
?>

我的数据库这个样子

3，合成在一起

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>智能农业</title>

<?php
$con = mysql_connect('xxxxx', '用户名', '密码');
mysql_select_db("xhf", $con);
$sql = "SELECT id, temperature ,hum from room";
$result=mysql_query($sql,$con);

while($row = mysql_fetch_array($result))
{
$day[]=intval($row['id']);
$count[]=intval($row['temperature']);
$count1[]=intval($row['hum']);
}
$day = json_encode($day);
$zxk1 = json_encode($count);
$shidu = json_encode($count1);
?>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
 <script type="text/javascript">
$(function () {
var chart = Highcharts.chart('container', {
	chart: {
		type: 'line'
	},
	title: {
		text: '农业大棚数据'
	},
	xAxis: {
		categories:  <?php echo $day; ?>
	},
	yAxis: {
		title: {
			text: '气温 (°C)'
		}
	},
	plotOptions: {
		line: {
			dataLabels: {
				// 开启数据标签
				enabled: true          
			},
			// 关闭鼠标跟踪，对应的提示框、点击事件会失效
			enableMouseTracking: true
		}
	},
	series: [{
		name: '温度',
		data: <?php 
		    echo $zxk1; 
		?>
	},
	   {
		name: '湿度',
		data: <?php 
		    echo $shidu;
			?>
			}
	]
});
})
</script>

</head>
<body>

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

4，运行效果