highcharts画面积图 

  1 $(function () {
  2     var categories= [
  3                 '前五日',
  4                 '前四日',
  5                 '前三日',
  6                 '前两日',
  7                 '前一日',
  8                 '后一日',
  9                 '后两日',
 10                 '后三日',
 11                 '后四日',
 12                 '后五日'
 13             ];
 14     $('#container').highcharts({
 15         chart: {
 16             type: 'areaspline',
 17             zoomType:'x',
 18             width:660,
 19             height:260
 20             //padding:0
 21         },
 22         colors:['#65b5f3','#ff9399','#cdcdcd'],
 23         exporting:{
 24             enabled:false
 25         },
 26         title: {
 27             text: ''
 28         },
 29         
 30         legend: {
 31             enabled:false,
 32             //layout: 'horizon',
 33             align: 'left',
 34             verticalAlign: 'top',
 35             x: 300,
 36             y: -10,
 37             floating: true,
 38             //borderWidth: .1,
 39             //backgroundColor: '#FFFFFF',
 40             //margin:14,
 41             symbolWidth:14,
 42             symbolHeight:3,
 43             //padding:10,
 44             width:300
 45         },
 46         xAxis: {
 47             lineColor:"#efefef",
 48             tickLength:0,
 49             color:'#8d8d8d',
 50             labels:{
 51                 style:{
 52                     color:"#8d8d8d"
 53                 },
 54                 formatter:function(){
 55                     return categories[this.value];
 56                 }
 57             }
 58             //tickInterval:1
 59         },
 60         yAxis: {
 61             title: {
 62                 text: ''
 63             },
 64             lineWidth:1,
 65             gridLineWidth:1,
 66             tickInterval:1,
 67             tickColor:'red',
 68             gridLineColor:'#efefef',
 69             lineColor:"#efefef",
 70             labels:{
 71                 style:{
 72                     color:"#8d8d8d"
 73                 }
 74             }
 75         },
 76         tooltip: {
 77             shared: true,
 78             valueSuffix: ' units',
 79             backgroundColor:'#2c3238',
 80             crosshairs: {
 81                 width: 1,
 82                 color: '#777',
 83                 dashStyle: 'dash'
 84             },
 85             style:{
 86                 color:'#fff'
 87             },
 88             formatter:function(){
 89                　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>";
　　　　　　　　　　　　}
 90                 return html;
 91             }
 92         },
 93         credits: {
 94             enabled: false
 95         },
 96         plotOptions: {
 97             areaspline: {
 98                 fillOpacity: 0.2,
 99                 lineWidth:1,
100                 marker:{
101                     states:{
102                         hover:{
103                             enabled:false
104                         }
105                     }
106                 }
107             },
108             series : {
109                 marker:{
110                     enabled:false
111                 },
112                 states:{
113                     hover:{
114                         lineWidth:1
115                     }
116                 }
117             },
118             area:{
119                 marker:{
120                     states:{
121                         hover:{
122                             lineWidth:1  //去掉区域边界线加粗的效果
123                         }
124                     }
125                 }
126             }
127         },
128         series: [{
129             name: '2015年',
130             data: [10, 4, 1, 5, 4, 10, 12,1,9]
131         }, {
132             name: '2014年',
133             data: [0, 3, 4, 1, 3, 10, 4,1,9]
134         }, {
135             name: '2013年',
136             data: [11, 11, 9, 1, 3, 1, 4,2,9]
137         }]
138     });
139 });

 

posted @ 2016-01-19 13:14  有间小屋在森林  阅读(1016)  评论(0)    收藏  举报