jquery和highcharts折线图、柱形图、饼状图-模拟后台传参源码

标签：jquery   highcharts   

js代码：

<script type="text/javascript"> 
	$(function(){
		showLine();
		showColumn();
		showPie();
	});
		
	function showPie(){
		 jQuery.ajax({
			type: "get",
			url: "csylLine.json",
			async: false,
			dataType: "json",
			success:function(data1){
				$('#pieChart').highcharts({
					chart : {
						plotBackgroundColor : null,
						plotBorderWidth : null,
						plotShadow : false,
						type: 'pie'
					},
					title : { // 标题
						text : '城关区一周降雨地区占全城份额比例'
					},
					tooltip : { // 提示框
						pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
					},
					plotOptions : {
						pie : {
							allowPointSelect : true,
							cursor : 'pointer',
							dataLabels : {
								enabled : false
							},
							showInLegend : true
						}
					},
					series : [ { // 数据列
						name : 'Browser share',
						data : data1.dataList
					} ],
			        credits:{ // 版权信息
			        	enabled:false 
			        }
				});
				 
			},
			error:function(err){
				alert(err);
			}
		}); 
	}
	function showLine() {
		jQuery.ajax({
				type: "get",
				url: "csylLine.json",
				async: false,
				dataType: "json",
				success:function(data1){
					$('#lineChart').highcharts({
				        title: {
				            text: '城关区一周内气温情况折线图',
				            x: -20 
				        },//center标题
				        xAxis: {
				           categories: data1.xList
				        }, //横坐标数据点文字
				        yAxis: {
				            title: {
				                text: 'Temperature (°C)'  //Y坐标说明
				            },
				            plotLines: [{
				                value: 0,
				                width: 1,
				                color: '#808080'
				            }]
				        },
				        tooltip: {
				            valueSuffix: '°C'
				        },
				        legend: {
				            borderWidth: 0
				        },
				        series: data1.yList,  //此处定义两个series，即两条线，最高气温和最低气温，如果更多则在里面添加大括号。
				        
				        credits: { // 版权信息
				            enabled: false
				        }
				    }); 
				}
		 });
	}
	
	function showColumn() {
		jQuery.ajax({
			type: "get",
			url: "csylLine.json",
			async: false,
			dataType: "json",
			success:function(data1){
	    		$('#columnChart').highcharts({
	    			chart: {
	    	            type: 'column'  //柱形图 
	    	        },
	    	        title: {
	    	            text: '城关区一周降雨预报'
	    	        },
	    	    	xAxis: {
	    	            categories: data1.xList
	    	        },
	    	    	yAxis: {
	    	            min: 0,
	    	            title: {
	    	                text: '%/mm'
	    	            }
	    	        },
	    	        tooltip: {
	    	            pointFormat:'{series.name}: <b>{point.y} </b>',
	    	            shared: true,
	    	            useHTML: true
	    	        },
	    	        plotOptions: {
	    	            column: {
	    	                pointPadding: 0.2,
	    	                borderWidth: 0
	    	            }
	    	        },
	    	        series: data1.zList,
	    		});
	    	}
	    });
	}
	
</script>

后台传参json格式：

{
	"xList":["09-10", "09-11", "09-12", "09-13", "09-14", "09-15", "09-16"],//x轴的数据（折线、柱形）
	"yList":[{
				 "name": "日最高温","data": [28,28,27,26,29,32,25]
			 }, {
				 "name": "日最低温","data": [15,15,14,13,16,19,12]
			}],
	"zList":[{
	    	     "name": "降雨几率",
	    	     "data": [16.0, 20.6, 48.5, 27.4, 19.1, 15.6, 0]
	    	 },{
	    	     "name": "日降雨量",
	             "data": [0.8, 0.5, 9.3, 1.0, 0.8, 0.6, 0]
	    	}],//折线图和柱形图是一致的
	"dataList":[
				["城东",1],["平区",2],["东区",4],["西区",1],["郊区",1]
	        ]//饼状图数据
	    	
}

jquery和highcharts折线图、柱形图、饼状图-模拟后台传参源码

标签：jquery   highcharts   

原文地址：http://blog.csdn.net/u011513323/article/details/39028945