-
Notifications
You must be signed in to change notification settings - Fork 8
/
TableBarChart.css
149 lines (132 loc) · 5.21 KB
/
TableBarChart.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
.caption {
display: block;
text-align: center;
font-weight: bold;
height: 40px;
}
.graph {
position: relative;
float: right;
}
.graph ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.legend {
background: #f0f0f0;
border-radius: 4px;
bottom: 0;
position: relative;
text-align: left;
width: 100%;
}
.legend li {
display: block;
float: left;
height: 20px;
margin: 0;
padding: 10px 20px;
}
.legend span.icon {
background-position: 50% 0;
border-radius: 2px;
display: block;
float: left;
height: 16px;
margin: 2px 10px 0 0;
width: 16px;
}
.x-axis {
bottom: 0;
color: #555;
position: absolute;
text-align: center;
}
.x-axis li {
float: left;
margin: 0 10px;
}
.y-axis {
color: #555;
position: absolute;
text-align: left;
}
.y-axis ul {
padding: 0px;
margin: 0px;
}
.y-axis li {
border-top: 1px solid #ccc;
display: block;
}
.y-axis li span {
display: block;
position: relative;
text-align: right;
}
.bars {
position: absolute;
width: 100%;
z-index: 10;
}
.bar-group {
float: left;
height: 100%;
position: relative;
margin: 0 10px;
}
.bar {
border-radius: 3px 3px 0 0;
bottom: 0;
position: absolute;
text-align: center;
#cursor: pointer;
display: block;
}
.bar span {
margin-top: -25px;
*zoom: 1;
display: none;
position: relative;
}
.item-0 {
background: #d0e4f7; /* Old browsers */
background: -moz-linear-gradient(left, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(50%,#0a77d5), color-stop(79%,#539fe1), color-stop(100%,#87bcea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* IE10+ */
background: linear-gradient(to right, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=1 ); /* IE6-9 */
}
.item-1 {
background: #f0b7a1; /* Old browsers */
background: -moz-linear-gradient(left, #f0b7a1 0%, #8c3310 42%, #752201 59%, #bf6e4e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f0b7a1), color-stop(42%,#8c3310), color-stop(59%,#752201), color-stop(100%,#bf6e4e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #f0b7a1 0%,#8c3310 42%,#752201 59%,#bf6e4e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #f0b7a1 0%,#8c3310 42%,#752201 59%,#bf6e4e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #f0b7a1 0%,#8c3310 42%,#752201 59%,#bf6e4e 100%); /* IE10+ */
background: linear-gradient(to right, #f0b7a1 0%,#8c3310 42%,#752201 59%,#bf6e4e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=1 ); /* IE6-9 */
}
.item-2 {
background: #6d6d6d; /* Old browsers */
background: -moz-linear-gradient(left, #6d6d6d 0%, #828282 12%, #666666 25%, #424242 49%, #727272 72%, #666666 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#6d6d6d), color-stop(12%,#828282), color-stop(25%,#666666), color-stop(49%,#424242), color-stop(72%,#727272), color-stop(100%,#666666)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #6d6d6d 0%,#828282 12%,#666666 25%,#424242 49%,#727272 72%,#666666 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #6d6d6d 0%,#828282 12%,#666666 25%,#424242 49%,#727272 72%,#666666 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #6d6d6d 0%,#828282 12%,#666666 25%,#424242 49%,#727272 72%,#666666 100%); /* IE10+ */
background: linear-gradient(to right, #6d6d6d 0%,#828282 12%,#666666 25%,#424242 49%,#727272 72%,#666666 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6d', endColorstr='#666666',GradientType=1 ); /* IE6-9 */
}
.item-3 {
background: #bfd255; /* Old browsers */
background: -moz-linear-gradient(left, #bfd255 0%, #8eb92a 28%, #72aa00 47%, #8eb92a 78%, #9ecb2d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#bfd255), color-stop(28%,#8eb92a), color-stop(47%,#72aa00), color-stop(78%,#8eb92a), color-stop(100%,#9ecb2d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #bfd255 0%,#8eb92a 28%,#72aa00 47%,#8eb92a 78%,#9ecb2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #bfd255 0%,#8eb92a 28%,#72aa00 47%,#8eb92a 78%,#9ecb2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #bfd255 0%,#8eb92a 28%,#72aa00 47%,#8eb92a 78%,#9ecb2d 100%); /* IE10+ */
background: linear-gradient(to right, #bfd255 0%,#8eb92a 28%,#72aa00 47%,#8eb92a 78%,#9ecb2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=1 ); /* IE6-9 */
}