highcharts+php展示数据

最新推荐文章于 2021-04-06 14:02:54 发布

chengchengbox

最新推荐文章于 2021-04-06 14:02:54 发布

阅读量265

点赞数

分类专栏： highcharts html js

本文链接：https://blog.csdn.net/qq_34297991/article/details/104574769

版权

html 同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

26 篇文章 0 订阅

订阅专栏

highcharts

2 篇文章 0 订阅

订阅专栏

php注意事项：

1、需要把数字 intval()

2、转换为二次函数

3、返回数据return、echo

例如：

        $sql = "SELECT a.wname,count(1) as count FROM writer AS a LEFT JOIN article AS d ON a.id = d.wid where d.artid>0 GROUP BY a.id";
		$data = $mypdo->select($sql,array()) ;
		$arr=array();
		for($i=0;$i<count($data);$i++){ 
			$l=count($arr);
			$arr[$l][0]=$data[$i]['wname'];
			$arr[$l][1]=intval($data[$i]['count']);
		}
		echo json_encode($arr);
		exit();

html

1、eval()

<html>
<head>
<LINK href="admin_Css.css" type=text/css rel=stylesheet>
<script language="JavaScript" type="text/JavaScript">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>类别管理</title>
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
--> 
</style>
 <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>

<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
<script> 
	var b1=[]; 
	$.ajax({ 
		type : "GET",  
		url : "tongji.php",
		data: {'act':'b1'},		 
		success : function(result) { 
			// var res=JSON.parse(result);
			var res=eval('(' + result + ')');
			// console.log(res);
			var chart = Highcharts.chart('container', {
				chart: {
					type: 'column'
				},
				title: {
					text: '全球各大城市人口排行'
				},
				subtitle: {
					text: ''
				},
				xAxis: {
					type: 'category',
					labels: {
						rotation: -45  // 设置轴标签旋转角度
					}
				},
				yAxis: {
					min: 0,
					title: {
						text: '作品(个)'
					}
				},
				legend: {
					enabled: false
				},
				tooltip: {
					pointFormat: '作品总量: <b>{point.y:.1f} 个</b>'
				},
				series: [{
					name: '作品',
					data: res,
					dataLabels: {
						enabled: true,
						rotation: -90,
						color: '#FFFFFF',
						align: 'right',
						format: '{point.y:.1f}', // :.1f 为保留 1 位小数
						y: 10
					}
				}]
			});
		} 
	});  
</script>
</html>