多维 HighCharts

news2024/11/25 12:23:55

1：showHighChart.html

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<!-- js脚本都是官方的,后两个是highchart脚本 -->
		<script type="text/javascript" src="jquery1.7.1.min.js"></script>
		<script src="highcharts.js"></script>
		<script src="exporting.js"></script>

	  	<script>
		  	$(function(){
				retrieve();
			});
		  	
		  	function retrieve(){
				var chartType = "spline"; /*line column spline bar*/
				var firstDim = $("#firstDim").val();
				var secondDim = $("#secondDim").val();
				var requestUrl = "getHighChartData.php?firstDim="+firstDim+"&secondDim="+secondDim;
				retrieveHighChartReport("hcDiv",chartType,requestUrl);
			}

			function retrieveHighChartReport(renderDiv,chartType,requestUrl){
				var options = {
					chart:{renderTo:renderDiv,
						   type:chartType,
						   marginRight:130,
						   marginBottom:25
					},
					title:{text:'IFly HighChart',
						   x:-20	//center
					},
					xAxis:{categories:[],
						   gridLineWidth:1
					},
					yAxis:{
						title:{
							text:'Y-Axis Name'
						},
						plotLines:[{value:0,
									width:1,
									color:'#808080'
								  }]
					},
					tooltip:{formatter:function(){
								return '<b>'+this.series.name+'</b><br />'+this.x+': '+this.y;
							 }
					},
					legend:{layout:'vertical',
							align:'right',
							verticalAlign:'top',
							x:-10,
							y:100,
							borderWidth:0
					},
					series:[]
				}
				$.getJSON(requestUrl,function(json){
					options.xAxis.categories=json[0]['xAxisData'];
					options.series[0] = json[1];
					options.series[1] = json[2];
					chart = new Highcharts.Chart(options);
				});
			}
	  	</script>
	</head>
	<body >
		<input type="text" value="展现维度:销售数量" id="firstDim" />
		<input type="text" value="展现维度:总价" id="secondDim" />
		<div id="hcDiv" style="min-width:800px;height:500px;margin:0 auto;" ></div>
		<br /><br />
	</body>
</html>

2：conn.php：

<?php

$conn = @mysql_connect('localhost:port','root','password');
if (!$conn) {
	die('Could not connect: ' . mysql_error());
}
mysql_select_db('dbname', $conn);

?>

3：database：

SET FOREIGN_KEY_CHECKS=0;

DROP TABLE IF EXISTS `osa_menu_url`;
CREATE TABLE `osa_menu_url` (
  `menu_id` int(11) NOT NULL AUTO_INCREMENT,
  `menu_name` varchar(50) NOT NULL,
  `menu_url` varchar(255) NOT NULL,
  `module_id` int(11) NOT NULL,
  `is_show` tinyint(4) NOT NULL COMMENT '是否在sidebar里出现',
  `online` int(11) NOT NULL DEFAULT '1' COMMENT '在线状态，还是下线状态，即可用，不可用。',
  `shortcut_allowed` int(10) unsigned NOT NULL DEFAULT '1' COMMENT '是否允许快捷访问',
  `menu_desc` varchar(255) DEFAULT NULL,
  `father_menu` int(11) NOT NULL DEFAULT '0' COMMENT '上一级菜单',
  PRIMARY KEY (`menu_id`),
  UNIQUE KEY `menu_url` (`menu_url`)
) ENGINE=InnoDB AUTO_INCREMENT=107 DEFAULT CHARSET=utf8 COMMENT='功能链接（菜单链接）';

INSERT INTO `osa_menu_url` VALUES ('1', '首页', '/index.php', '1', '0', '1', '1', '后台首页', '0');
INSERT INTO `osa_menu_url` VALUES ('2', '账号列表', '/admin/users.php', '1', '1', '1', '1', '账号列表', '0');
INSERT INTO `osa_menu_url` VALUES ('3', '修改账号', '/admin/user_modify.php', '1', '0', '1', '0', '修改账号', '2');
INSERT INTO `osa_menu_url` VALUES ('4', '新建账号', '/admin/user_add.php', '1', '0', '1', '1', '新建账号', '2');
INSERT INTO `osa_menu_url` VALUES ('5', '个人信息', '/admin/profile.php', '1', '0', '1', '1', '个人信息', '0');
INSERT INTO `osa_menu_url` VALUES ('6', '账号组成员', '/admin/group.php', '1', '0', '1', '0', '显示账号组详情及该组成员', '7');
INSERT INTO `osa_menu_url` VALUES ('7', '账号组管理', '/admin/groups.php', '1', '1', '1', '1', '增加管理员', '0');
INSERT INTO `osa_menu_url` VALUES ('8', '修改账号组', '/admin/group_modify.php', '1', '0', '1', '0', '修改账号组', '7');
INSERT INTO `osa_menu_url` VALUES ('9', '新建账号组', '/admin/group_add.php', '1', '0', '1', '1', '新建账号组', '7');
INSERT INTO `osa_menu_url` VALUES ('10', '权限管理', '/admin/group_role.php', '1', '1', '1', '1', '用户权限依赖于账号组的权限', '0');
INSERT INTO `osa_menu_url` VALUES ('11', '菜单模块', '/admin/modules.php', '1', '1', '1', '1', '菜单里的模块', '0');
INSERT INTO `osa_menu_url` VALUES ('12', '编辑菜单模块', '/admin/module_modify.php', '1', '0', '1', '0', '编辑模块', '11');
INSERT INTO `osa_menu_url` VALUES ('13', '添加菜单模块', '/admin/module_add.php', '1', '0', '1', '1', '添加菜单模块', '11');
INSERT INTO `osa_menu_url` VALUES ('14', '功能列表', '/admin/menus.php', '1', '1', '1', '1', '菜单功能及可访问的链接', '0');
INSERT INTO `osa_menu_url` VALUES ('15', '增加功能', '/admin/menu_add.php', '1', '0', '1', '1', '增加功能', '14');
INSERT INTO `osa_menu_url` VALUES ('16', '功能修改', '/admin/menu_modify.php', '1', '0', '1', '0', '修改功能', '14');
INSERT INTO `osa_menu_url` VALUES ('17', '设置模板', '/admin/set.php', '1', '0', '1', '1', '设置模板', '0');
INSERT INTO `osa_menu_url` VALUES ('18', '便签管理', '/admin/quicknotes.php', '1', '1', '1', '1', 'quick note', '0');
INSERT INTO `osa_menu_url` VALUES ('19', '菜单链接列表', '/admin/module.php', '1', '0', '1', '0', '显示模块详情及该模块下的菜单', '11');
INSERT INTO `osa_menu_url` VALUES ('20', '登入', '/login.php', '1', '0', '1', '1', '登入页面', '0');
INSERT INTO `osa_menu_url` VALUES ('21', '操作记录', '/admin/syslog.php', '1', '1', '1', '1', '用户操作的历史行为', '0');
INSERT INTO `osa_menu_url` VALUES ('22', '系统信息', '/admin/system.php', '1', '1', '1', '1', '显示系统相关信息', '0');
INSERT INTO `osa_menu_url` VALUES ('23', 'ajax访问修改快捷菜单', '/ajax/shortcut.php', '1', '0', '1', '0', 'ajax请求', '0');
INSERT INTO `osa_menu_url` VALUES ('24', '添加便签', '/admin/quicknote_add.php', '1', '0', '1', '1', '添加quicknote的内容', '18');
INSERT INTO `osa_menu_url` VALUES ('25', '修改便签', '/admin/quicknote_modify.php', '1', '0', '1', '0', '修改quicknote的内容', '18');
INSERT INTO `osa_menu_url` VALUES ('26', '系统设置', '/admin/setting.php', '1', '0', '1', '0', '系统设置', '0');
INSERT INTO `osa_menu_url` VALUES ('101', '样例', '/sample/sample.php', '2', '1', '1', '1', '', '0');
INSERT INTO `osa_menu_url` VALUES ('102', '读取Excel.xls文件', '/sample/read_excel.php', '2', '1', '1', '1', '', '0');

4：getHighChartData.php:

<?php
	
	include 'conn.php';
	$resultArr = array();

	$firstDim = $_REQUEST['firstDim'];
	$secondDim = $_REQUEST['secondDim'];
	
	$baseSql = "select menu_id,module_id,is_show from osa_menu_url ";
	
	$rs = mysql_query($baseSql);

	$rowChannelName = array();
	$rowSellNum = array();
	$rowSellNum['name'] = $firstDim;
	$rowTotalPrice = array();
	$rowTotalPrice['name'] = $secondDim;

	while($rec = mysql_fetch_assoc($rs)){
		$rowChannelName['xAxisData'][] = $rec['menu_id'];
		$rowSellNum['data'][] = $rec['module_id'];
		$rowTotalPrice['data'][] = $rec['is_show'];
	}
	
	array_push($resultArr,$rowChannelName);
	array_push($resultArr,$rowSellNum);
	array_push($resultArr,$rowTotalPrice);

	print json_encode($resultArr,JSON_NUMERIC_CHECK);

?>

5：访问showHighChart.html：