首页 > 代码库 > 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折线图、柱形图、饼状图-模拟后台传參源代码