统计图

好久没发表过什么东西了,今天下午闲的实在是蛋疼,没事做!!!所以才想起来,跟大家分享下。

由于自己是实习生,有好多的东西都不懂,进公司也不久,就在最近遇到统计图,可能到同事们写的代码很少很少,但是我就是看不懂是怎么搞定的,今天终于在网上查到答案,并消化的差不多了!!!下面我给大家分享下统计图源码(里面的数据都是死数据):希望能给向我一样的菜鸟一点帮助

<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>

相关推荐