好久没发表过什么东西了,今天下午闲的实在是蛋疼,没事做!!!所以才想起来,跟大家分享下。
由于自己是实习生,有好多的东西都不懂,进公司也不久,就在最近遇到统计图,可能到同事们写的代码很少很少,但是我就是看不懂是怎么搞定的,今天终于在网上查到答案,并消化的差不多了!!!下面我给大家分享下统计图源码(里面的数据都是死数据):希望能给向我一样的菜鸟一点帮助
<HTML>
<HEAD>
<!-- 1.引入jquery库 -->
<script type="text/javascript" src="javascript/jquery-1.6.3.min.js"></script>
<!-- 2.引入highcharts的核心文件 -->
<script type="text/javascript" src="javascript/highcharts.js"></script>
<!-- 3.引入导出需要的js库文件 -->
<script type="text/javascript" src="javascript/exporting.js"></script>
<script type="text/javascript">
<script type="text/javascript">
Highcharts.setOptions({
colors: ['#D9A63D', '#6ACD4C', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
var chart;
$(document).ready(function() {
chart = new Highcharts.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() {
return this.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.导入容器用于显示图表-->
<div id="container"
style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
由于自己是实习生,有好多的东西都不懂,进公司也不久,就在最近遇到统计图,可能到同事们写的代码很少很少,但是我就是看不懂是怎么搞定的,今天终于在网上查到答案,并消化的差不多了!!!下面我给大家分享下统计图源码(里面的数据都是死数据):希望能给向我一样的菜鸟一点帮助
<HTML>
<HEAD>
<!-- 1.引入jquery库 -->
<script type="text/javascript" src="javascript/jquery-1.6.3.min.js"></script>
<!-- 2.引入highcharts的核心文件 -->
<script type="text/javascript" src="javascript/highcharts.js"></script>
<!-- 3.引入导出需要的js库文件 -->
<script type="text/javascript" src="javascript/exporting.js"></script>
<script type="text/javascript">
<script type="text/javascript">
Highcharts.setOptions({
colors: ['#D9A63D', '#6ACD4C', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
var chart;
$(document).ready(function() {
chart = new Highcharts.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() {
return this.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.导入容器用于显示图表-->
<div id="container"
style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>