Robot/morris.js
1
0
Fork 0
mirror of https://github.com/morrisjs/morris.js.git synced 2024-11-10 21:36:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add a strokeColor options to the Donut class

Browse Source 
to be able to present the donut over another background than a white
one.
This commit is contained in:
Pierre Dulac 2013-01-18 01:11:08 +01:00
parent 1c81906dcd
commit 1703eb54a9
4 changed files with 41 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
examples/donut-stroke-color.html Normal file
View File

@ -0,0 +1,31 @@
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://raw.github.com/DmitryBaranovskiy/raphael/300aa589f5a0ba7fce667cd62c7cdda0bd5ad904/raphael-min.js"></script>
<script src="../morris.js"></script>
<script src="lib/prettify.js"></script>
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
<style>
body { background:#ccc; }
</style>
</head>
<body>
<h1>Donut Chart</h1>
<div id="graph"></div>
<pre id="code" class="prettyprint linenums">
Morris.Donut({
element: 'graph',
data: [
{value: 70, label: 'foo'},
{value: 15, label: 'bar'},
{value: 10, label: 'baz'},
{value: 5, label: 'A really really long label'}
],
strokeColor: '#ccc',
formatter: function (x) { return x + "%"}
});
</pre>
</body>

7
lib/morris.donut.coffee
View File

@ -22,6 +22,7 @@ class Morris.Donut
'#052C48' '#052C48'
'#042135' '#042135'
], ],
strokeColor: '#FFFFFF',
formatter: Morris.commas formatter: Morris.commas
# Create and render a donut chart. # Create and render a donut chart.
@ -71,7 +72,7 @@ class Morris.Donut
@segments = [] @segments = []
for d in @data for d in @data
next = last + min + C * (d.value / total) next = last + min + C * (d.value / total)
seg = new Morris.DonutSegment(cx, cy, w*2, w, last, next, @options.colors[idx % @options.colors.length], d) seg = new Morris.DonutSegment(cx, cy, w*2, w, last, next, @options.colors[idx % @options.colors.length], @options.strokeColor, d)
seg.render @r seg.render @r
@segments.push seg @segments.push seg
seg.on 'hover', @select seg.on 'hover', @select
@ -114,7 +115,7 @@ class Morris.Donut
# #
# @private # @private
class Morris.DonutSegment extends Morris.EventEmitter class Morris.DonutSegment extends Morris.EventEmitter
constructor: (@cx, @cy, @inner, @outer, p0, p1, @color, @data) -> constructor: (@cx, @cy, @inner, @outer, p0, p1, @color, @strokeColor, @data) ->
@sin_p0 = Math.sin(p0) @sin_p0 = Math.sin(p0)
@cos_p0 = Math.cos(p0) @cos_p0 = Math.cos(p0)
@sin_p1 = Math.sin(p1) @sin_p1 = Math.sin(p1)
@ -150,7 +151,7 @@ class Morris.DonutSegment extends Morris.EventEmitter
render: (r) -> render: (r) ->
@arc = r.path(@hilight).attr(stroke: @color, 'stroke-width': 2, opacity: 0) @arc = r.path(@hilight).attr(stroke: @color, 'stroke-width': 2, opacity: 0)
@seg = r.path(@path) @seg = r.path(@path)
.attr(fill: @color, stroke: 'white', 'stroke-width': 3) .attr(fill: @color, stroke: @strokeColor, 'stroke-width': 3)
.hover(=> @fire('hover', @)) .hover(=> @fire('hover', @))
select: => select: =>

8
morris.js
View File

@ -1304,6 +1304,7 @@
Donut.prototype.defaults = { Donut.prototype.defaults = {
colors: ['#0B62A4', '#3980B5', '#679DC6', '#95BBD7', '#B0CCE1', '#095791', '#095085', '#083E67', '#052C48', '#042135'], colors: ['#0B62A4', '#3980B5', '#679DC6', '#95BBD7', '#B0CCE1', '#095791', '#095085', '#083E67', '#052C48', '#042135'],
strokeColor: '#FFFFFF',
formatter: Morris.commas formatter: Morris.commas
}; };
@ -1350,7 +1351,7 @@
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) { for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
d = _ref1[_j]; d = _ref1[_j];
next = last + min + C * (d.value / total); next = last + min + C * (d.value / total);
seg = new Morris.DonutSegment(cx, cy, w * 2, w, last, next, this.options.colors[idx % this.options.colors.length], d); seg = new Morris.DonutSegment(cx, cy, w * 2, w, last, next, this.options.colors[idx % this.options.colors.length], this.options.strokeColor, d);
seg.render(this.r); seg.render(this.r);
this.segments.push(seg); this.segments.push(seg);
seg.on('hover', this.select); seg.on('hover', this.select);
@ -1438,12 +1439,13 @@
__extends(DonutSegment, _super); __extends(DonutSegment, _super);
function DonutSegment(cx, cy, inner, outer, p0, p1, color, data) { function DonutSegment(cx, cy, inner, outer, p0, p1, color, strokeColor, data) {
this.cx = cx; this.cx = cx;
this.cy = cy; this.cy = cy;
this.inner = inner; this.inner = inner;
this.outer = outer; this.outer = outer;
this.color = color; this.color = color;
this.strokeColor = strokeColor;
this.data = data; this.data = data;
this.deselect = __bind(this.deselect, this); this.deselect = __bind(this.deselect, this);
@ -1485,7 +1487,7 @@
}); });
return this.seg = r.path(this.path).attr({ return this.seg = r.path(this.path).attr({
fill: this.color, fill: this.color,
stroke: 'white', stroke: this.strokeColor,
'stroke-width': 3 'stroke-width': 3
}).hover(function() { }).hover(function() {
return _this.fire('hover', _this); return _this.fire('hover', _this);

2
morris.min.js vendored
View File

File diff suppressed because one or more lines are too long