Browse Source

Group bars and text for nice css effect

pull/8/head
Florian Mounier 13 years ago
parent
commit
23d9e40e3b
  1. 11
      pygal/bar.css
  2. 8
      pygal/bar.py
  3. 5
      pygal/graph.css
  4. 16
      pygal/graph.py

11
pygal/bar.css

@ -1,12 +1,21 @@
.bar .dataPointLabel {
fill-opacity: 0;
-webkit-transition: 250ms;
}
.bar:hover .dataPointLabel {
fill-opacity: 0.9;
fill: #000000;
}
.key, .fill {
fill-opacity: 0.5;
stroke: none;
stroke-width: 1px;
-webkit-transition: 250ms;
}
.fill:hover{
fill-opacity: 0.25;
-webkit-transition: 250ms;
}
.key1,.fill1{

8
pygal/bar.py

@ -185,7 +185,9 @@ class VerticalBar(Bar):
if self.stack == 'side':
left += bar_width * dataset_count
rect = etree.SubElement(self.graph, 'rect', {
rect_group = etree.SubElement(self.graph, "g",
{'class': 'bar'})
etree.SubElement(rect_group, 'rect', {
'x': str(left),
'y': str(top),
'width': str(bar_width),
@ -194,7 +196,7 @@ class VerticalBar(Bar):
})
self.make_datapoint_text(
left + bar_width / 2.0, top - 6, value)
rect_group, left + bar_width / 2.0, top - 6, value)
class HorizontalBar(Bar):
@ -249,7 +251,7 @@ class HorizontalBar(Bar):
'y': str(top),
'width': str(length),
'height': str(bar_height),
'class': 'fill%s' % (dataset_count + 1),
'class': 'fill fill%s' % (dataset_count + 1),
})
self.make_datapoint_text(

5
pygal/graph.css

@ -72,17 +72,12 @@ Base styles for pygal.Graph
}
.dataPointLabel{
fill: transparent;
text-anchor:middle;
font-size: 10px;
font-family: "Arial", sans-serif;
font-weight: normal;
}
.dataPointLabel:hover{
fill: #000000;
}
.staggerGuideLine{
fill: none;
stroke: #000000;

16
pygal/graph.py

@ -337,24 +337,14 @@ class Graph(object):
# consider width/2 for centering the labels
return 0
def make_datapoint_text(self, x, y, value, style=None):
def make_datapoint_text(self, group, x, y, value, style=None):
"""
Add text for a datapoint
"""
if not self.show_data_values:
# do nothing
return
# first lay down the text in a wide white stroke to
# differentiate it from the background
e = etree.SubElement(self.foreground, 'text', {
'x': str(x),
'y': str(y),
'class': 'dataPointLabel',
'style': '%(style)s stroke: #fff; stroke-width: 2;' % vars(),
})
e.text = str(value)
# then lay down the text in the specified style
e = etree.SubElement(self.foreground, 'text', {
e = etree.SubElement(group, 'text', {
'x': str(x),
'y': str(y),
'class': 'dataPointLabel'})

Loading…
Cancel
Save