jQuery.Highcharts.js绘制柱状图饼状图曲线图
在数据统计和分析业务中，有时会遇到客户需要在一个图表中将柱状图、饼状图、曲线图的都体现出来，即可以从柱状图中看出具体数据、又能从曲线图中看出变化趋势，还能从饼状图中看出各部分数据比重。Highcharts可以轻松实现三图合一的效果。
varchart;
$(document).ready(function(){
chart=newHighcharts.Chart({
chart:{
renderTo:'container',
defaultSeriesType:'area'
},
title:{
text:'HistoricandEstimatedWorldwidePopulationGrowthbyRegion'
},
subtitle:{
text:'Source:Wikipedia.org'
},
xAxis:{
categories:['1750','1800','1850','1900','1950','1999','2050'],
tickmarkPlacement:'on',
title:{
enabled:false
}
},
yAxis:{
title:{
text:'Billions'
},
labels:{
formatter:function(){
returnthis.value/1000;
}
}
},
tooltip:{
formatter:function(){
return''+
this.x+':'+Highcharts.numberFormat(this.y,0,',')+'millions';
}
},
plotOptions:{
area:{
stacking:'normal',
lineColor:'#666666',
lineWidth:1,
marker:{
lineWidth:1,
lineColor:'#666666'
}
}
},
series:[{
name:'Asia',
data:[502,635,809,947,1402,3634,5268]
},{
name:'Africa',
data:[106,107,111,133,221,767,1766]
},{
name:'Europe',
data:[163,203,276,408,547,729,628]
},{
name:'America',
data:[18,31,54,156,339,818,1201]
},{
name:'Oceania',
data:[2,2,2,6,13,30,46]
}]
});
});
以上就是本文所述的全部内容了，希望对大家使用jQuery绘制柱状图饼状图曲线图能够有所帮助