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 });
