统计图
atpsoul 2012-03-16
好久没发表过什么东西了，今天下午闲的实在是蛋疼，没事做！！！所以才想起来，跟大家分享下。
由于自己是实习生，有好多的东西都不懂，进公司也不久，就在最近遇到统计图，可能到同事们写的代码很少很少，但是我就是看不懂是怎么搞定的，今天终于在网上查到答案，并消化的差不多了！！！下面我给大家分享下统计图源码（里面的数据都是死数据）：希望能给向我一样的菜鸟一点帮助
<HTML>
<HEAD>
<!--1.引入jquery库-->
<scripttype="text/javascript"src="javascript/jquery-1.6.3.min.js"></script>
<!--2.引入highcharts的核心文件-->
<scripttype="text/javascript"src="javascript/highcharts.js"></script>
<!--3.引入导出需要的js库文件-->
<scripttype="text/javascript"src="javascript/exporting.js"></script>
<scripttype="text/javascript">
<scripttype="text/javascript">
Highcharts.setOptions({
colors:['#D9A63D','#6ACD4C','#DDDF00','#24CBE5','#64E572','#FF9655','#FFF263','#6AF9C4']
});
varchart;
$(document).ready(function(){
chart=newHighcharts.Chart({
chart:{
renderTo:'container',//"rederTo"图表的页面显示容器container
defaultSeriesType:'column',//图表类别（类型），可取值有：line、spline、area、areaspline、bar、column,pie,scatter等
marginRight:130,//上下左右空隙
marginBottom:25//上下左右空隙
},
title:{
text:'全国各大城市季节情况',//”text“坐标名称
x:-20
//center
},
subtitle:{
text:'主要城市温度比较',
x:-20
},
xAxis:{
categories:['一月','二月','三月','四月',
'五月','六月','七月','八月','九月',
'十月','十一月','十二月']
},
yAxis:{
title:{
text:'温度(°C)'
},
plotLines:[{
value:0,
width:1,
color:'#808080'
}]
},
tooltip:{
formatter:function(){
returnthis.series.name+this.x+':'+this.y+'°C';
}
},
legend:{
layout:'vertical',
align:'right',
verticalAlign:'top',
x:-10,
y:100,
borderWidth:0
},
series:[
{
name:'北京',
data:[7.0,6.9,9.5,14.5,18.2,
21.5,24.8,26.5,23.3,18.3,
13.9,9.6]
},
{
name:'上海',
data:[-0.2,0.8,5.7,11.3,17.0,
22.0,24.8,24.1,20.1,14.1,
8.6,2.5]
},
{
name:'南昌',
data:[-0.9,0.6,3.5,8.4,13.5,
17.0,18.6,17.9,14.3,9.0,
3.9,1.0]
},
{
name:'长沙',
data:[3.9,4.2,5.7,8.5,11.9,
15.2,17.0,16.6,14.2,10.3,
6.6,4.8]
}]
});
});
</script>
</head>
<body>
<!--5.导入容器用于显示图表-->
<divid="container"
style="width:800px;height:400px;margin:0auto"></div>
</body>
</html>
