您的位置:首页 > 其它

highcharts画面积图

2016-01-19 13:14 246 查看
$(function () {
var categories= [
'前五日',
'前四日',
'前三日',
'前两日',
'前一日',
'后一日',
'后两日',
'后三日',
'后四日',
'后五日'
];
$('#container').highcharts({
chart: {
type: 'areaspline',
zoomType:'x',
width:660,
height:260
//padding:0
},
colors:['#65b5f3','#ff9399','#cdcdcd'],
exporting:{
enabled:false
},
title: {
text: ''
},

legend: {
enabled:false,
//layout: 'horizon',
align: 'left',
verticalAlign: 'top',
x: 300,
y: -10,
floating: true,
//borderWidth: .1,
//backgroundColor: '#FFFFFF',
//margin:14,
symbolWidth:14,
symbolHeight:3,
//padding:10,
width:300
},
xAxis: {
lineColor:"#efefef",
tickLength:0,
color:'#8d8d8d',
labels:{
style:{
color:"#8d8d8d"
},
formatter:function(){
return categories[this.value];
}
}
//tickInterval:1
},
yAxis: {
title: {
text: ''
},
lineWidth:1,
gridLineWidth:1,
tickInterval:1,
tickColor:'red',
gridLineColor:'#efefef',
lineColor:"#efefef",
labels:{
style:{
color:"#8d8d8d"
}
}
},
tooltip: {
shared: true,
valueSuffix: ' units',
backgroundColor:'#2c3238',
crosshairs: {
width: 1,
color: '#777',
dashStyle: 'dash'
},
style:{
color:'#fff'
},
formatter:function(){
 var data = this.points;
            var html = "";
            for(var i = 0 ; i < data.length; i++){
              html+= "<span>"+data[i].series.name+":"+data[i].y+"</span><br>";
            }

return html;
}
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.2,
lineWidth:1,
marker:{
states:{
hover:{
enabled:false
}
}
}
},
series : {
marker:{
enabled:false
},
states:{
hover:{
lineWidth:1
}
}
},
area:{
marker:{
states:{
hover:{
lineWidth:1  //去掉区域边界线加粗的效果
}
}
}
}
},
series: [{
name: '2015年',
data: [10, 4, 1, 5, 4, 10, 12,1,9]
}, {
name: '2014年',
data: [0, 3, 4, 1, 3, 10, 4,1,9]
}, {
name: '2013年',
data: [11, 11, 9, 1, 3, 1, 4,2,9]
}]
});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: