jquery图表统计插件-highcharts详解
83500391 2011-11-04
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>渠道流量统计</title>
<styletype="text/css">
body{margin:0;padding:0;}
</style>
<!--引入jquery插件-->
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!--引入highchart插件-->
<scriptsrc="highcharts.js"type="text/javascript"></script>
<!--引入highchart主题-->
<scriptsrc="grid.js"type="text/javascript"></script>
<!--调用数据，生成chart-->
<scripttype="text/javascript">
varchart;
$(document).ready(function(){
chart=newHighcharts.Chart({
chart:{//整体控制
renderTo:'container',//图表容器的DIVbar:横向条形图
defaultSeriesType:'line',//可选，默认为line【line:折线;spline:平滑的线;area:区域图;bar:曲线图;pie:饼图;scatter:点状图等等;
marginRight:130,//外边距控制(上下左右空隙)
marginBottom:25//外边距控制
},
title:{
text:'渠道流量统计',//主标题
x:-20//标题相对位置默认居中
},
subtitle:{
text:'趋势图',//副标题
x:60//标题相对位置
},
xAxis:{//x轴数据
categories:['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
},
yAxis:{//y轴数据
title:{
text:'标量'
},
plotLines:[{//标线
value:0,
width:1,
color:'#808080'
}]
},
tooltip:{//数据点的提示框
formatter:function(){
return'<b>'+this.series.name+'</b><br/>'+this.x+':'+this.y;
}//formatter需要一个回调函数，可以通过this关键字打点得到当前一些图表信息
},
legend:{
layout:'vertical',
align:'right',
verticalAlign:'top',
x:-10,
y:100,
borderWidth:0
},
series:[{//数据数组,json格式中name为这组数据的名字，data为这组数据的数组
name:'渠道一',
data:[2,7,9,25,31,32,9]
},{
name:'渠道二',
data:[6,14,19,23,25,32,12]
},{
name:'渠道三',
data:[7,16,17,20,25,26,4]
},{
name:'渠道四',
data:[7,16,18,24,28,29,6]
},{
name:'渠道五',
data:[9,10,12,16,18,32,15]
}]
});
});
</script>
</head>
<body>
<!--装载图表的容器-->
<divid="container"style="width:100%;height:600px">
</div>
</body>
</html>1.如何去掉右下角的 http:// www.highcharts.com标识：
在highcharts.js中找到：
credits:{
enabled:true,
text:'Highcharts.com',
href:'http://www.highcharts.com',
position:{
align:'right',
x:-10,
verticalAlign:'bottom',
y:-5
}
只要改掉这个地方就行了，或者直接取消，enabled:false
或者
text:'yourself.com',
href:'http://www.yourself.com',
