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]
]//饼状图数据}