Highcharts学习笔记

xafc2370

浏览: 530536 次
性别:
来自: 厦门

最近访客更多访客>>

WoKo_Jb

youyou_yo

lbyzx123

lauyuhim

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

highcharts jquery JavaScript

<!DOCTYPE HTML> 
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	div{
		float:left;
	}
	</style>
	<script type="text/javascript" src="./jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="./highcharts.js"></script>
	<script type="text/javascript" src="./highcharts-3d.js"></script>
	<script type="text/javascript">
		$(function(){		
		/*  zk获取后台传过来的参数
	        var textboxMonth = zk.Widget.$(jq("$workSheetMonth"), document); 
			var month = textboxMonth.getValue();
			var textboxData = zk.Widget.$(jq("$workSheetData"), document); 
			var data = textboxData.getValue();
			var monthArray = month.split(",");
			var dataArray = data.split(";");
			var array0 = dataArray[0].split(",");
			var array1 = dataArray[1].split(",");
			var array2 = dataArray[2].split(","); */
			$('#container1').highcharts({
				chart: {
					type: 'column'
				},
				title: {
					text: '测试柱形图'
				},
				xAxis: {
					categories: ['2015年4月','2015年5月','2015年6月'],
				//	categories: monthArray,
					crosshair: true
				},
				yAxis: {
					min: 0,
					max: 100,
					title: {
						text: ''
					},
					labels : {  
						formatter : function() {//设置纵坐标值的样式  
						 return this.value + '%';  
						}  
					 }
				},
				tooltip: {
					headerFormat: '<span style="font-size:10px">{point.key}</span><table width="120px">',
					pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
						'<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
					footerFormat: '</table>',
		//			shared: true,  //各柱子是否共享提示
					useHTML: true
				},
				plotOptions: {
					column: {
						pointPadding: 0.2,
						borderWidth: 0
					}
				},
				//去掉右下角的highcharts.com
				credits: {
						enabled:false 
					},
				//去掉右上角的打印及其导出按钮 
				//当然不引入exporting.js也不会显示
				//exporting: { enabled:false },
				series: [{
					name: 'Issue完成率',
					color:'#6DA2FF',
					data: [22,33,61],
				//	data: [Number(array0[0]),Number(array1[0]),Number(array2[0])],
					dataLabels: {
					enabled: true,    //默认是false，即默认不显示数值
					color: '#666',    //字体颜色
					align: 'center',   //居柱子上方中间
					formatter : function() {//设置纵坐标值的样式  
						 return this.y + '%';  
						}
				   }
				}, {
					name: 'Issue及时率',
					color:'#FF7979',
					data: [34,45,21],
					dataLabels: {
						enabled: true,    //默认是false，即默认不显示数值
						color: '#666',    //字体颜色
						align: 'center',   //居柱子上方中间
						formatter : function() {//设置纵坐标值的样式  
							 return this.y + '%';  
							}
					   }
				}, {
					name: 'Issue成功率',
					color:'#96DF69',
					data: [4,56,78],
					dataLabels: {
						enabled: true,    //默认是false，即默认不显示数值
						color: '#666',    //字体颜色
						align: 'center',   //居柱子上方中间
						formatter : function() {//设置纵坐标值的样式  
							 return this.y + '%';  
							}
					   }
				}]
			});
			//倾斜环形图(3d) 环形图都是在饼图的基础上设置形成
			jQuery('#container2').highcharts({
					chart: {
					type: 'pie',
					options3d: {
						enabled: true,  //3d图形
						alpha: 45     //倾斜45
					}
				},
				//设置每个环形的颜色
				colors:['#EFAAD3','#3CB2CF','#F7C359'],
				title: {
					text: '测试环形图'
				},
				//去掉右下角的highcharts.com
				credits: {
					enabled:false  
				},
				plotOptions: {
					pie: {
						innerSize: 80,  //内环大小
						depth: 0,       //3d环厚度
						showInLegend: true,
						dataLabels: {
							enabled: true,
							format: '{point.name}:{point.y:.lf}条[{point.percentage:.1f}%]'
						}
					}
				},
				series: [{
					name: '工单数',
					data: [
						['策略高', 23],
						['策略中', 32],
						['策略低', 111]
					]
				/*	data: [
						[array0[0], Number(array0[1])],
						[array1[0], Number(array1[1])],
						[array2[0], Number(array2[1])]
					]
					*/
				}]
			});
		});
	</script>
</head>
<body>   
	<div id="container1" style="min-width: 700px; height: 400px;"></div>
	<div id="container2" style="min-width: 550px; height: 400px;"></div>
</body>	
</html>

效果图如下：